先讲一下原理：checkboxhack技术
我们使用 CSS 一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何 JavaScript 代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换效果，或是多级下拉列表效果等等。
相信很多前端开发人员都会遇到 boss 让修改 checkbox 和 radio 样式，毕竟自带的样式太丑了。后来我们发现修改自带样式并不是那么容易，最后直接使出杀手锏——点击之后替换图片。
今天教大家一种方法，不用替换图片，随意修改样式。
先讲一下原理：两个关键东东，一是伪类选择器 :checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是加号 + 相邻兄弟选择器，这个符号表示选择后面的兄弟节点。于是，两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了。
而如何让单复选框选中和不选中了，那就是 label 标签了哈，for 属性锚定对应的单选框或是复选框，然后点击这里的 label 标签元素的时候，对应的单复选框就会选中或是取消选中。然后，就有上面的效果啦！
radio 的css样式：
radio的html:
checkbox的css样式：
checkbox的html:
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
