前言：
某天，寫(xiě)了一個(gè)帶有單選按鈕的界面，突然想起網(wǎng)上其他網(wǎng)站各種各樣的單選按鈕，
遂想"改下這個(gè)圓圈圈怎么樣？"，于是在找了一遍單選按鈕的樣式，
沒(méi)一個(gè)說(shuō)是修改圓圈圈，于是又去網(wǎng)上找了一遍，各種各樣，自己選了其中一種并稍加修改，感覺(jué)簡(jiǎn)單通俗易懂，
而且最重要的是效果好，故在此和大家分享一下。
原理：
之前已經(jīng)提及，html的單選按鈕沒(méi)有提供一個(gè)樣式能修改其圓圈，
所以僅靠一句類(lèi)似"color:#fff"的語(yǔ)句是不可能的，不過(guò)考慮：
（A）html每個(gè)input都可以加一個(gè)label，點(diǎn)擊label，也會(huì)出發(fā)input的點(diǎn)擊：
（B）label標(biāo)簽可以加背景，并通過(guò)其他樣式，讓背景顯示在文字的左邊：
（C）input標(biāo)簽可以隱藏：
（D）點(diǎn)擊label后，可以通過(guò)JS，修改其背景圖片:
（此處為圖片）
看到這里有沒(méi)有恍然大悟，什么自定義單選按鈕的圖標(biāo)，
不過(guò)是把單選按鈕隱藏了，然后通過(guò)每次點(diǎn)擊修改label的背景圖片，
達(dá)到自定義的效果，而且后期需要把單選按鈕的圖標(biāo)換成花花草草貓貓狗狗，
也不過(guò)是換下圖片而已。如果還不能實(shí)現(xiàn)，我們接著往下細(xì)談：
實(shí)現(xiàn)：
原理中說(shuō)的四點(diǎn)，也可以看作實(shí)現(xiàn)的自定義單選按鈕的四部曲：
A：沒(méi)啥好說(shuō)的，就是標(biāo)簽使用。
<label for="sex-man" class="radio_label checked"> <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /> 男 </label>
B:
| 設(shè)置背景： | background: url(images/o_radio_bk.png) no-repeat; |
| 設(shè)置背景大小： | background-size：20px 40px; (這里我的背景圖是兩個(gè)圖標(biāo)上下接在一起的，故高度為背景的兩倍) |
| 設(shè)置顯示方式： | display: inline-block; （設(shè)置label為行內(nèi)塊元素，讓它能有寬高，而且不換行） |
| 設(shè)置高度和行高： | height: 20px;line-height: 20px; |
| 設(shè)置文字靠右一點(diǎn)： | text-indent:20px; |
C：隱藏單選按鈕： display:none;
D: 這一步我使用的JQuery，主要為了方便。首先定義了一個(gè)被選中的css的class，
另外給所有的單選按鈕點(diǎn)擊時(shí)都添加了一個(gè)方法：找出所有name相同的單選按鈕的label，
去掉他們被選中的樣式，然后給自己加上一個(gè)選中的樣式。
選中的樣式：
.checked {
background-position: 0 -20px;
}這里我用了background-position，把背景圖向上偏移20px，從而把選中的圖片顯示出來(lái)。
添加點(diǎn)擊處理方法：
$(function(){
//給所有的單選按鈕點(diǎn)擊添加處理 $("input[type=’radio’]").click(function(){
//找出和當(dāng)前name一樣的單選按鈕對(duì)應(yīng)的label，并去除選中的樣式的class
$("input[type=’radio’][name=’"+$(this).attr(’name’)+"’]").parent().removeClass("checked")；
//給自己對(duì)應(yīng)的label
$(this).parent().addClass("checked"); }); });
最后：
如果想修改其他標(biāo)簽，或者給其他標(biāo)簽（比如：多選框）添加樣式，也可以嘗試這種辦法。
【 微信掃一掃 】
