css 自定义复选框样式

原生的复选框样式一般采用<input type="checkbox" />来实现的，样式不是很好看，而且还不能修改。自定义实现的方式也比较多，这里不一一道来，主要讲下纯css实现的自定义勾选框的效果。主要使用到2个知识点，label 标签 和 + 相邻兄弟选择器。

label

表示用户界面中某个元素的说明，一般用于表单元素。一般有2种方式和元素进行关联。

1. 通过label的for属性，指定需要绑定元素的id；

<label for="user">用户名：</label>
<input type="text" id="user" name="user" />

2. 将需要绑定的元素嵌套在label标签内。

<label>
  <span>用户名：</span>
  <input id="user" name="user" type="text" />
</label>

+选择器（相邻兄弟选择器）

两个元素相邻，共享一个父元素，此时会选中 + 后面的元素。

<div>
  <p>123</p>
  <h3>123</h3>
</div>

/* h3 会显示红色 */
p + h3 {
  color: red;
}

自定义复选框

将原生的复选框 display 设置成none，利用label的特性，依然能对input进行勾选和取消勾选；在勾选的使用，利用 +选择器 ，input[type='checkbox']:checked带上自定义的选中样式，就可以做到自定义的勾选。自定义的样式 可以使用伪类来实现。

<!-- 注意：span是自定义的复选框，需要在input的后面，这样使用+选择器才能选中 -->
<label>
  <input id="check" type="checkbox">
  <span class="check"></span>
</label>

/* 定位进行样式的微调 */
.check {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #00b0f0;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  top: -2px;
}
/* 在after的content中，使用✔️符号进行勾选的效果 */
.check::after {
  content: '✓';
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: none;
  text-align: center;
  margin: 0;
  background-color: #00b0f0;
  position: absolute;
  top: -1px;
  left: -1px;
  line-height: 16px;
}
#check {
  display: none;
}
/* 在使用label触发checked的时候，触发+选择器来实现自定义勾选 */
#check:checked + .check::after {
  display: inline-block;
}

实现效果

补充

其他类型 如自定义单选也是同样的道理，只需要将type改为radio，自定义radio的未选中和选中的样式就可以实现。