自定義 radio 的樣式，更改選中樣式

 

思路：

1. 可以為<label>元素添加生成性內容(偽元素)，並基於單選按鈕的狀態來為其設置樣式；

2. 然后把真正的單選按鈕隱藏起來；

3. 最后把生成內容美化一下。

解決方法：

1. 一段簡單的結構代碼：

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

2. 生成一個偽元素，作為美化版的單選按鈕，先給偽元素添加一些樣式：

input[type="radio"] + label::before {
    content: "\a0"; /*不換行空格*/
    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;
    line-height: 1; 
}

注：可以通過margin-top來調節位置

現在的樣子：

原來的單選按鈕仍然可見，但是我們先給單選按鈕的勾選狀態添加樣式：

3. 給單選按鈕的勾選狀態添加不同的樣式： 

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

現在的樣子： 

4. 現在把原來的單選按鈕隱藏：

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

 現在的樣子：

隱藏原來的單選按鈕時，如果使用 display: none; 的話，那樣會把它從鍵盤 tab 鍵切換焦點的隊列中完全刪除。

於是可采用剪切的方式，讓剪切后的尺寸為零，這樣就隱藏了原來的單選按鈕。

 

 

參考鏈接：http://www.cnblogs.com/xinjie-just/p/5911086.html