利用纯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;
</div>和猜想的一样，它确实和样式的定制有关。但是解释里面只摘录了“把某元素变成另外一种元素的样子”，却没有告诉我们怎样才能“把复选框里面的√”变成“×”。
别急，我们先试一下修改这个属性：
简单粗暴的把样式直接设置为 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!
</div>