純CSS模擬單選框和核取方塊

瀏覽器預設的一些表單樣式都不太好看，就比如說在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來模擬實現單選框的美化，當然核取方塊的美化原理其實是一樣的，這裡就不再贅述了。