美化浏览器的radio和checkbox样式

先讲一下原理：checkboxhack技术

我们使用CSS一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何JavaScript代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换效果，或是多级下拉列表效果等等。

相信很多前端开发人员都会遇到boss让修改checkbox和radio样式，毕竟自带的样式太丑了。后来我们发现修改自带样式并不是那么容易，最后直接使出杀手锏——点击之后替换图片。

今天教大家一种方法，不用替换图片，随意修改样式。

先讲一下原理：两个关键东东，一是伪类选择器:checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是加号+相邻兄弟选择器，这个符号表示选择后面的兄弟节点。于是，两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了。

而如何让单复选框选中和不选中了，那就是label标签了哈，for属性锚定对应的单选框或是复选框，然后点击这里的label标签元素的时候，对应的单复选框就会选中或是取消选中。然后，就有上面的效果啦！

radio 的css样式：

radio的html:

checkbox的css样式：

checkbox的html: