为什么要自定义checkbox样式
- 浏览器默认的样式不统一
- 浏览器默认样式不符合设计需求
基本思路
通过label与input建立联系, 然后隐藏input, 利用:checked伪类toggle选择的状态, 合理的利用::before伪元素, 就能做到HTML结构简洁, 纯CSS实现自定义样式
demo
//html
<input type="checkbox" id="check">
<label for="check">选中</label>
// css
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 5px;
background-clip: content-box;
}
input[type="checkbox"]:checked+label::before {
background-color: #f00;
}
注意的点
- input需要隐藏
- ::before一定需要content元素, 为了与内容在同一行且能设置宽高, display为inline-block
- :checked表示选中后的状态, 和::before结合使用
- 使用background-clip可以达到留白的效果
