利用純CSS3定制單選/多選框樣式
在前端開發中，往往需要對默認元素的樣式進行修改。然而有的元素卻不是那么容易就能找到它所對應的樣式的，今天要討論的重點內容就是 <input type="checkbox"> 以及 <input type="radio"> 這兩款默認表單元素的樣式修改問題。
我們以復選框 <input type="checkbox"> 為例子。
在webkit內核瀏覽器如chrome中，復選框未選中的默認樣式如下圖：
選中以后如下圖：
嗯，是挺丑的……
如果我們想對它進行樣式的修改，應該怎么辦呢？按照常規，我們現查看一下它的默認樣式都有一些什么屬性：
在 user agent stylesheet ，也就是瀏覽器的默認樣式里面，它的屬性并不復雜，都是我們常見的內容。我們可以通過覆蓋這些樣式去修改它的大小，顏色，邊框等等。但是它中間的鉤子，似乎并沒有能夠直接覆蓋修改的樣式。真的是這樣嗎？
我們注意到，有一個比較不常見的屬性， -webkit-appearance ，直譯過來就是“webkit的樣子”，似乎和webkit內核瀏覽器的樣式定制有關？我們現了解一下這是啥屬性。在w3cschool里面，我們可以看到下面的解釋：
定義和用法
appearance 屬性允許您使元素看上去像標準的用戶界面元素。
默認值： normal
繼承性： no
版本： CSS3 JavaScript
語法： object.style.appearance="button"
瀏覽器支持
所有主流瀏覽器都不支持 appearance 屬性。
Firefox 支持替代的 -moz-appearance 屬性。
Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。
appearance: normal|icon|window|button|menu|field;
和猜想的一樣，它確實和樣式的定制有關。但是解釋里面只摘錄了“把某元素變成另外一種元素的樣子”，卻沒有告訴我們怎樣才能“把復選框里面的√”變成“×”。
別急，我們先試一下修改這個屬性：
簡單粗暴的把樣式直接設置為 none ，看看效果：
它不見了！！
等等，這是不是可以意味著，我們可以對它進行（慘無人道的）完全的自定義樣式呢？比如我們想把它默認的“√”變成別的東西。
font-awesome是一套很漂亮的字體圖標，現在我想把它的圖標放在這個復選框里面。
首先引入font-awesome的css文件，不多說。
然后我們先把這個復選框“未選中狀態”設置樣式：
input[type=checkbox] {
display: inline-block;
height: 20px;
width: 20px;
border: 1px solid #000;
overflow: hidden;
vertical-align: middle;
text-align: center;
-webkit-appearance: none;
font: normal normal normal 14px/1 FontAwesome;
outline: 0;
background: 0 0;
} 以上代碼是為復選框未選中狀態設置了寬高，邊框背景等樣式，注意這里的重點有兩個，其一是我們已經討論過的 -webkit-appearance ，把它設置為 none 的原因就是把它整個抹掉，我自己來畫的意思。其二是 font: normal normal normal 14px/1 FontAwesome ，它為這個復選框定義了字體屬性，為接下來的引用font-awesome作前提。
現在它長這樣：
接下來我們來定義“選中”的樣式，我們可以通過 :before 或者 :after 偽元素實現。
因為我們已經把它利用 -webkit-appearance 把所有樣式都抹除了，包括中間的“√”，所以我們完全可以自己畫一個，偽元素是非常好用的一個方法。
input[type=checkbox]:checked:after {
content: '\f00c';
font-size: 15px;
text-align: center;
line-height: 17px;
color: #000;
} 這里的 content: '\f00c' 是來自font-awesome的圖標字體編號，具體的查找可以到其官網，或者簡單粗暴地在官網例子中打開控制臺查看，比如這樣：
走到這一步，我們已經大功告成了，趕快來看看效果！
美美噠！
到此，我們完成了全部的通過純CSS3為默認復選框設置樣式的任務。
其他的如按鈕，單選框同理~
由于時間有限，暫時未在火狐和Safari瀏覽器測試，如果有測試過的同學歡迎在樓下評論交流哈！由于兼容性有限，這個定制的方案可作為參考，具體的使用還是得看場合需求。
歡迎關注我的個人前端技術博客： http://jrainlau.github.io/
Thanks for reading, see ya next time!