自定义checkbox样式

转载：https://blog.csdn.net/illusion_melody/article/details/81185049

默认的checkbox可能不能满足UI需求，而默认的样式是不能直接修改的，那该如何修改呢？

在改样式之前我们建议先了解<label>标签属性。

我们发现，可以通过label来操控关联的表单控件，于是，我们的思路是：

把input的样式隐藏起来，通过设计label的样式（也就是input的样式）

然后通过定位用label覆盖input,这样功能和样式都是一致的。

这里我们以checkbox为例（其他input表单控件的默认样式修改思路时一样的！）

现在的结果是这样的

点击第二个label盒子也能操控input的选中和取消。接下来，我们给input隐藏，设置visibility：hidden即可，然后把label的位置移到input所在的位置。

这时候点击label是没有出现选中符号“√”的，我们要给选中时添加自己想要的图片既可以了：

.wrap input:checked+label{ // 这段代码是当input选中时,给input的相邻标签label加一个背景图片 
 
         background-image:url("check.png") 
 
}

效果：

这样就完成了自定义的input样式。