利用純CSS3定制單選/多選框樣式_html/css

和猜想的一樣，它確實和樣式的定制有關。但是解釋里面只摘錄了“把某元素變成另外一種元素的樣子”，卻沒有告訴我們怎樣才能“把復選框里面的√”變成“×”。
別急，我們先試一下修改這個屬性：

簡單粗暴的把樣式直接設置為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!

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com