如何在纯HTML中修改checkbox复选框的背景颜色

原生复选框默认由浏览器内置样式渲染，直接设置background-color属性不会生效，样式不生效的核心原因是没有先清除浏览器默认的控件样式。

修复后的可用CSS如下：

input[type="checkbox"] {
  /* 清除浏览器默认样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 自定义基础尺寸、边框 */
  width: 16px;
  height: 16px;
  border: 1px solid #d1d1d1;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}

input[type="checkbox"]:checked {
  background-color: #002B4E;
  border-color: #002B4E;
  /* 内置白色对勾，无需外部资源 */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M10.5 1L4.5 7L1.5 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

原有代码中重复定义的:before、::before伪元素样式可以全部删除，没有样式覆盖冲突的情况下也不需要加!important声明。

内容的提问来源于stack exchange，提问作者Alex