對於表單，input[type=“radio”] 的樣式總是不那麼友好，在不同的瀏覽器中表現不一。

對單選按鈕自定義樣式，我們以前一直用的指令碼來實現，不過現在可以使用新的偽類 :checkbox 來實現。

如果直接對單選按鈕設定樣式，那麼這個偽類並不實用，因為沒有多少樣式能夠對單選按鈕起作用。不過，倒是可以基於單選按鈕的勾選狀態藉助組合選擇符來給其他元素設定樣式。

很多時候，無論是為了表單元素統一，還是為了使用者體驗良好，我們都會選擇 label 元素和 input[type=“radio”] 一起使用。當元素與單選按鈕關聯之後，也可以起到觸發開關的作用。

思路：

1. 可以為元素新增生成性內容(偽元素)，並基於單選按鈕的狀態來為其設定樣式；

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 鍵切換焦點的佇列中完全刪除。

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

舊方法：

思路：

1、將 input[type=“radio”] 隱藏， opacity: 0; 置於上層，當我們點選它時，就能正確的響應原本的事件。

2、自定義一個圓圈，置於下層，模擬原本相似的樣式；

3、用 js 實現選中 input[type=“radio”] 時，在其下層的自定義的元素改變原來的背景顏色。

程式碼：

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
            <span class="female-custom"></span> <!-- 同下面的 span 一樣作為自定義的元素 -->
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
            <span class="male-custom"></span>    
        </div>
    </div>
</form>


body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative; /* 設定為相對定位，以便讓子元素能絕對定位 */
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto; /* 這裡及以上的定位，可以讓該元素豎直居中。(top: 0; bottom: 0;) */
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.sex span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}        
.sex span.active {
    background-color: #000;            

}

=============

 $("#male").click( function () {
        $(this).siblings("span").addClass("active");
        $(this).parents("div").siblings("div").children("span").removeClass("active");
    });
    $("#female").click( function () {
        $(this).siblings("span").addClass("active");
        $(this).parents("div").siblings("div").children("span").removeClass("active");
    });

這樣處理後，在瀏覽器中展示效果全部一樣了：

擴充套件：

1. 對於程式碼中出現的定位，對父元素使用 position: relative; 給子元素使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能實現讓子元素相對於父元素居中(滿足水平居中和豎直居中)顯示。如果只是需要豎直居中，則不需要新增 right: 0; 和 left: 0; 的樣式。

2. 有時當我們不容易確定子元素的高度時，可以這樣設定：對父元素 position: relative; 對子元素 position: absolute; top: 10px; bottom: 10px; margin: auto; 這樣一來，子元素的高度就是父元素的高度減去20px後的值了，同樣，top 和 bottom 支援百分數，可擴充套件性更強。