利用純 CSS3 定製單選/多選框樣式

寫於 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的圖標字體編號，具體的查找能夠到其官網，或者簡單粗暴地在官網例子中打開控制檯查看，好比這樣：

走到這一步，咱們已經大功告成了，趕快來看看效果！

美美噠！ 到此，咱們完成了所有的經過純CSS3爲默認複選框設置樣式的任務。 其餘的如按鈕，單選框同理~ 因爲時間有限，暫時未在火狐和Safari瀏覽器測試，若是有測試過的同窗歡迎在樓下評論交流哈！因爲兼容性有限，這個定製的方案可做爲參考，具體的使用仍是得看場合需求。

歡迎關注個人我的前端技術博客：jrainlau.github.io/

Thanks for reading, see ya next time!