瀏覽器默認的一些表單樣式都不太好看，就比如說在Chrome瀏覽器下，默認單選框長下面這樣：

Chrome下默認單選框

灰不溜秋的，什么鬼，其實我想要下面這樣的：

Chrome下美化單選框

這樣看起來就很不錯，還加了動畫效果，可是默認的單選框只能改變其大小，像背景顏色啥的并不能改變，那該怎么辦呢？

沒關系，既然不能改變其本身，那咱就自己造一個出來。

我們可以用個簡單的span標簽（當然你也可以用其他標簽）來模擬原生的單選框，大概原理就是，先使用label標簽將原生單選框、用于模擬單選框的span標簽以及文字包起來，并將原生單選框隱藏，然后再使用:checked偽類和+選擇器來給span標簽加選中樣式。上面GIF圖中美化單選框的具體代碼如下：

<!--HTML代碼-->
<div class="form-group">
    <p>性別：</p>
    <label><input name="sex" type="radio" checked /><span></span>男</label>
    <label><input name="sex" type="radio" /><span></span>女</label>
</div>

/*CSS代碼*/
p{ display: inline-block;}
label{ position: relative; padding:0 10px 0 25px; cursor: pointer;}
label input{ display: none;}
label span{ position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 16px; margin: auto; border: 1px solid #ccc; border-radius: 100%;}
label span:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 6px; height: 6px; margin: auto; border-radius: 100%; background: #fff;
-webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .3s; transition: all .3s;}
label input:checked + span{ border-color: #1db0fc; background: #1db0fc;}
label input:checked + span:after{ -webkit-transform: scale(1); transform: scale(1);}

以上代碼可能有幾個地方需要解釋一下：

① label標簽可以將文字和表單控件綁定在一起，當你點擊其中的文字時，與之綁定的表單控件將會相應獲取焦點（單選框與復選框是選中該選項）；

② :checked偽類選擇器是用于篩選被選中的單選框或復選框，需要注意的是，該選擇器最低只兼容到IE9；

③ +選擇器是用于篩選緊鄰其后的兄弟元素，比如示例代碼中就是篩選被選中的單選框之后緊鄰的span元素。既然這里提到了，就再簡單地說說與之相似的~選擇器，該選擇器是用于篩選其后的所有兄弟元素，這兩個選擇器可能平時用得比較少，但是有時候用處還是挺大的。

好了，以上就是使用純CSS來模擬實現單選框的美化，當然復選框的美化原理其實是一樣的，這里就不再贅述了。