自定义复选框实现——css揭秘读书笔记及实战

自定义复选框

今天来做一个自定义的复选框

效果图

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，貌似没了？

敬请期待(挖坑)

自定义复选框选定的时候有打钩动画，挖坑一波。