如何使用CSS修改未勾选复选框的背景颜色？

直接修改原生checkbox的background-color通常会被浏览器默认样式覆盖，你之前的两种写法都没命中未选中状态的样式逻辑，所以无效。可以通过以下方式实现需求：

方法：自定义Checkbox样式 #

通过appearance: none清除浏览器默认样式，完全自定义未选中和选中状态的样式：

CSS代码 #

#ch {
  /* 清除浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  /* 设置未选中时的灰色背景 */
  background-color: #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

/* 选中状态的背景色（沿用你之前设置的accent-color值） */
#ch:checked {
  background-color: #68e199;
}

/* 自定义选中时的对勾标记 */
#ch:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
}

HTML代码 #

<div class="container">
  <input id="ch" type="checkbox" />
</div>

之前写法无效的原因 #

• 第一种写法用了:checked::before，仅针对选中状态，且原生checkbox的伪元素默认不支持直接修改背景；
• 第二种写法的background-color被浏览器默认的checkbox样式优先级覆盖，accent-color仅控制选中后的主题色，不影响未选中状态的背景。

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