相信很多前端开发人员都会遇到boss让修改checkbox和radio样式，毕竟自带的样式太丑了。后来我们发现修改自带样式并不是那么容易，最后直接使出杀手锏——点击之后替换图片。
今天教大家一种方法，不用替换图片，随意修改样式。还是先看效果图：
先讲一下原理：将input和label绑定，我们会发现，点击label的时候也会触发点击input事件，所以秘诀就是把input隐藏掉，向label添加伪元素 :before替代前面的容器，：after替代选中之后的标志。通过修改:before和:after样式，就能实现各式各样的单选复选框了。
一、修改普通复选框样式
废话不多说，直接上代码：
上面代码中“+”代表选中该元素后一个兄弟元素，“：checked”表示选中状态。
二、修改单选框样式
这里要注意一下，单选范围内所有的name要保持一致。
三、自定义其他样式
这个举个实现开关性质的样式提供参考，更多样式，需要自己去探索发现。
四、总结
以后再也不用担心修改单选复选框样式问题了，样式想怎么改就怎么改。给大家留个问题：input和label绑定的样式还有很多，举一反三，思索一下还能应用在哪方面？
有问题，欢迎随时联系我，我是竹风，希望与各位前端爱好者共同学习交流！
注意：本文归作者所有，未经作者允许，不得转载
