css揭秘之自定义复选框

前言

本篇文章是《css揭秘》一书的读书笔记，感谢作者。

自定义复选框

常规的样式能对复选框的更改，能做的很少。
而通过label标签结合伪元素的方式可以实现自定义复选框，并不是更改而是替代。

<input type="checkbox" id="wow">
<label for="wow">wow!</label>

如图为未做更改的原始按钮


接下来我们进行css样式更改
1.通过伪元素来新绘制一个复选框

input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;
  vertical-align: .2em;
  width: .8em;
  height: .8em;
  line-height: .65;
  text-indent: .15em;
  background: silver;
  margin-right: .2em;
}

2.定义伪元素复选框的选中样式

input[type="checkbox"]:checked + label::before {
  content: '\2713';
  background: yellowgreen;
}

3.将原来的复选框以一种不损失可访问性的方式隐藏起来

input[type="checkbox"] {
  position: absolute;
  /* 裁剪绝对定位元素 */
  clip: rect(0,0,0,0);
}

至此成功get！