障眼法改变复选框样式

障眼法改变复选框样式

复选框的可操作的样式只有width和height，如何做种定制化的复选框？

• 思路：设置一个假盒子，通过伪类 :checked 规定复选框选中状态时假盒子的样式，达到操作复选框切换加盒子的目的
• 关键：

1. 复选框的透明度要为0
2. 假盒子和复选框位置重叠，且宽高一样
3. 复选框层级必须比假盒子高

例：

<input type="checkbox" name="" id="">
<div></div>

input[type="checkbox"] {width: 40px;height: 40px;float: left;opacity: 0;
}input[type="checkbox"]:checked+div {/* 矢量图1*/background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');background-repeat: no-repeat;
}div {width: 40px;height: 40px;/* 矢量图2 */background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');background-repeat: no-repeat;
}