寫於 2016.01.20
在前端開發中，往往需要對預設元素的樣式進行修改。然而有的元素卻不是那麼容易就能找到它所對應的樣式的，今天要討論的重點內容就是<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的圖示字型編號，具體的查詢可以到其官網，或者簡單粗暴地在官網例子中開啟控制檯檢視，比如這樣：
走到這一步，我們已經大功告成了，趕快來看看效果！
歡迎關注我的個人前端技術部落格：jrainlau.github.io/
Thanks for reading, see ya next time!