改變checkbox的默認樣式總共有兩種方法，大體思路都是一樣的，先將checkbox隱藏，然后用一個樣式元素來偽裝成checkbox，主要的不同之處在於如何設置選中后的樣式。
第一種方法是使用圖片，將不同狀態下的樣式集合到一張圖片上，根據改變background-positon來改變樣式，類似於css sprite，之前隨筆中的icheck就是這個原理bootstrap中的icheck.js插件，這種方法的兼容性比較好，但是不夠靈活。
第二種方法是使用transform繪制選中后的樣式，這樣就可以根據自己的喜好隨意修改樣式了，但是兼容性不太強。
下圖代碼是第二種方法，其中紅色方框部分為transform的繪制過程。
1.html結構是這樣的：
label將樣式元素span和checkbox綁定起來
2.css是這樣的：
.input:checked+.span:after實現樣式切換
3.源碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>demo</title> 6 <style> 7 .label{position: relative;} 8 .input{display:none} 9 .span{display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;} 10 .input:checked+.span:after{ 11 content: ""; 12 position: absolute; 13 width: 9px; 14 height: 4px; 15 border: 2px solid #fd8845; 16 border-top-color: transparent; 17 border-right-color: transparent; 18 -ms-transform: rotate(-60deg); 19 -moz-transform: rotate(-60deg); 20 -webkit-transform: rotate(-60deg); 21 transform: rotate(-45deg);} 22 </style> 23 </head> 24 <body> 25 <div> 26 <label class="label"> 27 <input class="input" type="checkbox" name=""> 28 <span class="span"></span> 29 </label> 30 </div> 31 </body> 32 </html>
4.補充一段radio的css源碼（HTML結構和checkbox是一樣的）：
1 .radioLabel{position: relative;} 2 .radioInput{display: none;} 3 .radioSpan{display: inline-block;width: 1em;height: 1em;border:1px solid red;border-radius: 50%;} 4 .radioInput:checked+.radioSpan:after{ 5 content: ""; 6 position: absolute; 7 top: 47%; 8 left: 29%; 9 width: .4em; 10 height: .4em; 11 border-radius: 50%; 12 background-color: red; 13 }
5.補充二者的效果圖：
checkbox：
radio：