实现自定义checkbox、radio样式

最近在学习百度前端学院的课程，其中有一节课是关于自定义chackbox、radio样式，而且刚刚好项目中也要使用到自定义checked、radio样式，于是就开始着手实现，我使用的是背景图定位的方法，实现的方法不局限于此，还有使用伪类和伪元素实现自定义样式的。下面看看背景图实现的自定义样式：

这是使用的背景图片：

这是html代码：

有一点需要注意的就是，label的for一定要与关联的input的id一样，这样才能够关联起来，不然就无法实现选取该选项

<div class="mainBlock"><div class="checkbox-bgimg"><!--背景图实现--><h5>喜欢吃的东西</h5><input type="checkbox" id="checkbox1"><label for="checkbox1"></label><i>水果</i>   <input type="checkbox" id="checkbox2"><label for="checkbox2"></label><i>蔬菜</i></div><div class="checkbox-vclass"><!--伪元素实现--><h5>喜欢的游戏</h5><input type="checkbox" id="checkbox3"><label for="checkbox3"></label><i>狼人杀</i>   <input type="checkbox" id="checkbox4"><label for="checkbox4"></label><i>你画我猜</i></div><div class="radio-bgimg"><!--背景图实现--><h5>性别</h5><input name="bgimg" type="radio" id="radio1"><label for="radio1"></label><i>男</i>   <input name="bgimg" type="radio" id="radio2"><label for="radio2"></label><i>女</i></div><div class="radio-vclass"><!--伪元素实现--><h5>职业</h5><input name="vclass" type="radio" id="radio3"><label for="radio3"></label><i>学生</i>   <input name="vclass" type="radio" id="radio4"><label for="radio4"></label><i>教师</i></div></div>

这是css代码：

注意：这里可以不将radio隐藏起来的，因为display:none以后无法使用tab键选取，可以将透明度设置为0来实现相同的效果，这里使用的是将radio隐藏起来的做法

.checkbox-bgimg input[type="checkbox"]{/*将原有的radio隐藏起来*/display: none;}.checkbox-bgimg label{/*设置初始的label背景*/cursor: pointer;background: url(../img/99322cf8c3283e42.png);background-position: -25px -32px;display: inline-table;height: 15px;width: 15px;}.checkbox-bgimg input[type="checkbox"]:checked + label{/*相邻选择符选择被选取的radio相邻的label标签，改变背景*/background-position: -60px -32px;}

这是实现的最终效果：