使用表单验证时，CheckBox 是不可缺少的一部分。

由于浏览器兼容性，checkbox 会显示不同的样式，直接设置 input 的 backgroundColor 属性，不能改变checkbox 的背景颜色和样式。

下面是 Safari 浏览器 PC 端样式

下面是 Chrome 移动端样式

如果是用第三方库（例如 bootstrap），实际上是在原生的 input 上面进行改变，仍然不能解决浏览器兼容性问题。

所以，可以使用自定义的 CheckBox 解决这个问题

<div class="container">
  <input type="checkbox" />
  <div class="show-box" />
</div>

下面是自定义的CSS

.container {
  position: relative;
}

.container input:checked + .show-box {
  background: pink;
  /* 这里是背景颜色，可以自定义设置 */
}

.container .show-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d8d8d8;
  /* 这里是对勾颜色，可以自定义，和勾选框背景色色差较大 */
  background: white;
}

.container .show-box:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

可以根据实际需求设置背景色了。

然后，需要把默认的勾选框设置成透明，层级设置较高，那么界面点击勾选框就可以改变数据变化了。
如果这里的对勾选项是响应式的，那么根据 value 绑定 input 即可实现。

来自 https://blog.csdn.net/weixin_41697143/article/details/103089073