Html選項按鈕自訂樣式

標籤：no-repeat   ext   radio   顯示   checked   splay   通過   沒有   zip   

　　前言：

　　某天，寫了一個帶有選項按鈕的介面，突然想起網上其他網站各種各樣的選項按鈕，遂想“改下這個圓圈圈怎麼樣？”，於是在找了一遍選項按鈕的樣式，沒一個說是修改圓圈圈，於是又去網上找了一遍，各種各樣，自己選了其中一種並稍加修改，感覺簡單通俗易懂，而且最重要的是效果好，故在此和大家分享一下。
  

　　原理：
    之前已經提及，html的選項按鈕沒有提供一個樣式能修改其圓圈，所以僅靠一句類似“color:#fff”的語句是不可能的，不過考慮：
    （A）html每個input都可以加一個label，點擊label，也會出發input的點擊：

　　是否
    （B）label標籤可以加背景，並通過其他樣式，讓背景顯示在文字的左邊：　　　　　　　　　　　

　　是否
    （C）input標籤可以隱藏：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　是否
    （D）點擊label後，可以通過JS，修改其背景圖片:

　　（此處為圖片）

　　看到這裡有沒有恍然大悟，什麼自訂選項按鈕的表徵圖，不過是把選項按鈕隱藏了，然後通過每次點擊修改label的背景圖片，達到自訂的效果，而且後期需要把選項按鈕的表徵圖換成花花草草貓貓狗狗，也不過是換片而已。如果還不能實現，我們接著往下細談：

　　實現：

　　原理中說的四點，也可以看作實現的自訂選項按鈕的四部曲：

　　A：沒啥好說的，就是標籤使用。

<label for="sex-man" class="radio_label checked">    <input type="radio" value="1" checked="checked" id="sex-man" name="sex" />    男</label>

　　B:

設定背景：	background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
設定背景大小：	background-size：20px 40px;       (這裡我的背景圖是兩個表徵圖上下接在一起的，故高度為背景的兩倍)
設定顯示方式：	display: inline-block;　　　　（設定label為行內塊元素，讓它能有寬高，而且不換行）
設定高度和行高：	height: 20px;line-height: 20px;
設定文字靠右一點：	text-indent:20px;

 

　　C：隱藏選項按鈕：　　　　display:none;

　　D: 這一步我使用的JQuery，主要為了方便。首先定義了一個被選中的css的class，另外給所有的選項按鈕點擊時都添加了一個方法：找出所有name相同的選項按鈕的label，去掉他們被選中的樣式，然後給自己加上一個選中的樣式。

　　選中的樣式：

.checked {    background-position: 0  -20px;}

　　這裡我用了background-position，把背景圖向上位移20px，從而把選中的圖片顯示出來。

　　添加點擊處理方法：

$(function(){
　　//給所有的選項按鈕點擊添加處理    $("input[type=‘radio‘]").click(function(){
　　　　　//找出和當前name一樣的選項按鈕對應的label，並去除選中的樣式的class
　　　　　$("input[type=‘radio‘][name=‘"+$(this).attr(‘name‘)+"‘]").parent().removeClass("checked")；
　　　　　//給自己對應的label
　　　　　$(this).parent().addClass("checked");    });});    

 附：源碼

　　最後：

　　如果想修改其他標籤，或者給其他標籤（比如：多選框）添加樣式，也可以嘗試這種辦法。

 

Html選項按鈕自訂樣式