UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-nelson
[所有文章分類]
  • ASP.NET (0)
  • ASP.NET2.0 (0)
  • ASP.NET4.0 (0)
  • JavaScript (2)
  • jQuery (0)
  • FireFox (0)
  • UW系統設定 (0)
  • SQL (0)
  • SQL 2008 (0)
  • mirror (0)
  • SVN (0)
  • IE (1)
  • IIS (0)
  • IIS6 (0)
  • 閒聊 (0)
  • W3C (2)
  • 作業系統 (2)
  • C# (0)
  • CSS (7)
  • FileServer (0)
  • HTML 5 (1)
  • CKEditor (0)
  • UW.dll (0)
  • Visual Studio (0)
  • Browser (3)
  • SEO (0)
  • Google Apps (0)
  • 網站輔助系統 (0)
  • DNS (0)
  • SMTP (0)
  • 網管 (1)
  • 社群API (0)
  • SSL (0)
  • App_Inventor (0)
  • URLRewrite (0)
  • 開發工具 (0)
  • JSON (0)
  • Excel2007 (0)
  • 試題 (0)
  • LINQ (0)
  • bootstrap (0)
  • Vue (1)
  • IIS7 (0)
  • foodpanda (0)
  • 編碼 (0)
  • 資安 (0)
  • Sourcetree (0)
  • MAUI (0)
  • CMD (1)
  • my sql (0)
所有文章分類
[nelson的分類]
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
標籤
  • Block21211
  • EN
  • 20131018
  • SqlDepende
  • 9342121121
  • gDcfE3Zp
  • 36
  • MVC
  • 7853
  • [u2]
  • setnumber
  • 隱碼
  • union21211
  • 492
  • 考試
  • IndexOf
  • 258
  • 3685
  • ad
  • vb.net
  • query
  • -2755
  • debug
  • CK
  • nexttick
  • 指令
  • win
  • image
  • 擋IP
  • 檔案命名
  • 2981
  • -3089
  • apeg
  • write
  • ORM
  • ab79gvdD
  • a
  • ti
  • gM8ynCeE
  • request.fo
  • 82
  • 7310
  • print 0xFF
  • if
  • visual
  • 壓力測試
  • at9jiYNK
  • 排名
  • 436
  • 666
自製 radio button & checkbox 的注意事項
自製input 的 radio button 和 checkbox 之前常見的做法是,在input旁邊加入:not(old)的選擇器,如下所例 (以下寫法為SCSS格式)

input[type="radio"]:not(old){
width:28px;
margin:0;
padding:0;
@include opacity(0);
}
input[type="radio"]:not(old) + label{
display: inline-block;
margin-left: -28px;
padding-left: 18px;
background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
width:auto;
line-height: 12px;
}
input[type="radio"]:not(old):checked + label{
background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
width:auto;
}


但是chrome的新版本(39版)後開始,不能直接在input旁邊加:not(old),這段語法,點擊後,會無法正常顯示,所以解決的方法有兩個
1. 要使用:not(old)這段語法,不能在input旁邊加,必須是在他的外層上加,如下所例

.r-btn:not(old){
    input[type="radio"]{
     width:28px;
     margin:0;
     padding:0;
     @include opacity(0);
    }
    input[type="radio"] + label{
     display: inline-block;
     margin-left: -28px;
     padding-left: 18px;
     background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
     width:auto;
     line-height: 12px;
    }
    input[type="radio"]:checked + label{
     background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
     width:auto;
    }
}


2. 不使用:not(old),改用:not(:checked)寫法,Selectors 4也建議使用此語法,如下所例
input[type="radio"]:not(:checked), input[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}
input[type="radio"]:not(checked) + label{
display: inline-block;
margin-left: 4px;
padding-left: 18px;
background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
width:auto;
line-height: 12px;
}
input[type="radio"]:checked + label{
background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
width:auto;
}


 

nelson, 2014/11/21 下午 07:04:21
文章分類:W3C|Browser
Bike, candice, darren, frank, 瞇瞇, Reiko 已閱讀.
意見
No Data.
Comment:
*Nickname:
E-mail:
Blog URL:
  • *意見內容
  • 預覽
#Nickname#
2014/11/21 下午 07:04:21
#CommentContent#
*請輸入驗證碼: 看不懂,換張圖
 
~ Uwinfo ~