自定义checkbox样式

为什么要自定义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可以达到留白的效果

参考

纯CSS+HTML自定义checkbox效果