复选框的可操作的样式只有width和height,如何做种定制化的复选框?
- 思路:设置一个假盒子,通过伪类 :checked 规定复选框选中状态时假盒子的样式,达到操作复选框切换加盒子的目的
- 关键:
- 复选框的透明度要为0
- 假盒子和复选框位置重叠,且宽高一样
- 复选框层级必须比假盒子高
例:
<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.org/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.org/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;
}