實現自定義樣式的Radio Button

有以下HTML片斷：

<div class="female">
    <input type="radio" name="sex" />
    <label for="female">女</label>
</div>
<div class="male">                
    <input type="radio" name="sex" />
    <label for="male">男</label>
</div>

此時的頁面：

思路：

1. 可爲label元素前用僞類增長新的內容（自定義的Radio樣式）。
2. 用CSS讓新增的樣式（背景色）隨着單選按鈕的選中和取消而變化。
3. 隱藏真正的單選按鈕。

第一步：用僞類爲label元素增長自定義的Radio樣式：

input[type="radio"]+label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #01cd78;
    text-indent: .15em;
    padding: .1em; /*注意這裏有個padding，這是爲了裁切背景色的時候
                    讓內容和邊框留個間隙，這樣就造成了Radio的外觀*/
}

此時的頁面：

第二步：讓新增的樣式（背景色）隨着單選按鈕的選中和取消而變化：

input[type="radio"]:checked+label::before {
    background-color: #01cd78;
    background-clip: content-box;
}

這個類是說，在當前選中的那個radio類型的input後面的label，對這個Label添加背景色，並裁剪背景色(background-clip)，只爲content上色(content-box)，而padding不上色（第一步的類中，最後一個padding不能少）。

此時的頁面：

第三步：隱藏原始的Radio Button：

這裏咱們使用透明度opacity來控制，將原始的Radio變成透明的：

input[type="radio"] {
    position: absolute;
    opacity: 0; /*徹底透明*/
}

此時的頁面：

大功告成！

注意這裏除了opacity:0之外，還有一個position:absolute，若是隻有opacity項，那麼此時的radio還在原來的位置，只是看不見而已（紅框即爲原來radio的位置）：

加上這個position:absolute，能夠改變radio在文檔流中的位置，而本例DOM比較簡單，radio的位置移動後，會出如今這個僞類新增的元素（即綠色的圈）附近，因此此時能夠直接點擊綠圈。可是此時的radio位置和畫圈的位置並不徹底重合（以下圖所示），因此正常的開發中還須要用top/bottom/left/right來稍微調整一下radio的位置，使其儘可能與畫的圈重合，不然可能點擊不到。

 

參考頁面：

http://www.javashuo.com/article/p-kykpovpu-bx.html