自定义复选框
今天来做一个自定义的复选框
效果图
QMV{9@QLMMLR46%{O7JMQN3.png
代码
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
代码分析
实际上是把原来checkbox的样式隐藏了，然后使用伪类before在label前插入了一个替换的框框（label及其伪类也能触发行为）。
然后当checked后改变了伪类的内容和样式（也可根据需求改成其他的）
隐藏原来复选框的办法。
书上写法
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
首先是绝对定位脱离文档流，然后使用clip（clip 属性剪裁绝对定位元素。）裁剪
不使用display: none和visibility: hidden的原因
display: none的话会损失可访问性，也就是无法通过tab切换焦点。
visibility: hidden不会脱离文档流，只是隐藏显示了而已，所以会缺一块，也不好。
总结
首先学到了一种隐藏元素的新方法，绝对定位clip那个。
然后练习了一下css，貌似没了？
敬请期待(挖坑)
自定义复选框选定的时候有打钩动画，挖坑一波。
