對於表單，input[type="radio"] 的樣式總是不那么友好，在不同的瀏覽器中表現不一。
對單選按鈕自定義樣式，我們以前一直用的腳本來實現，不過現在可以使用新的偽類 :checkbox 來實現。
如果直接對單選按鈕設置樣式，那么這個偽類並不實用，因為沒有多少樣式能夠對單選按鈕起作用。不過，倒是可以基於單選按鈕的勾選狀態借助組合選擇符來給其他元素設置樣式。
很多時候，無論是為了表單元素統一，還是為了用戶體驗良好，我們都會選擇 label 元素和 input[type="radio"] 一起使用。當<label>元素與單選按鈕關聯之后，也可以起到觸發開關的作用。
思路：
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;
}
現在的樣子：
原來的單選按鈕仍然可見，但是我們先給單選按鈕的勾選狀態添加樣式：
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 鍵切換焦點的隊列中完全刪除。
於是可采用剪切的方式，讓剪切后的尺寸為零，這樣就隱藏了原來的單選按鈕。