如何用CSS设置未勾选的复选框/单选按钮的背景颜色？

问题描述 #

使用accent-color属性（除IE外所有主流浏览器均支持）可以修改复选框选中时的填充色，但未勾选状态的背景色设置方法并不明确。默认白色在多数场景适用，但在不依赖系统深色模式的自定义深色主题中，设置该背景色颇具难度。尝试过设置background-color为transparent、添加!important等多种方式均无效，想找到无需用自定义元素替代原生控件的可行技巧。

可行方案 #

方案1：CSS滤镜适配深色背景（推荐）

针对深色主题场景，通过filter属性反转控件颜色，同时保证accent-color不受影响，完美适配深色背景：

/* 深色主题容器 */
.dark-theme {
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
}

.dark-theme input[type="checkbox"],
.dark-theme input[type="radio"] {
  accent-color: purple; /* 自定义选中色 */
  /* 反转颜色将默认白色转为深色，hue-rotate保证选中色不变 */
  filter: invert(1) hue-rotate(180deg);
}

原理：invert(1)把控件的白色背景翻转为黑色，hue-rotate(180deg)抵消滤镜对accent-color的颜色反转，最终未勾选控件的背景会适配深色主题，选中色保持自定义的颜色。

方案2：浏览器原生伪元素修改（兼容性有限）

部分WebKit内核浏览器支持通过特定伪元素修改原生控件的基础样式，但不同浏览器伪元素命名差异大，仅适用于特定场景：

/* 仅WebKit内核浏览器生效 */
input[type="checkbox"]::-webkit-checkbox-container {
  background-color: #333;
  border: 1px solid #666;
}

这种方法不推荐作为通用方案，维护成本高。

完整示例代码 #

* {
  font-family: sans-serif;
}
label {
  cursor: pointer;
  user-select: none;
}
/* 深色主题样式 */
.dark-theme {
  background: #1a1a1a;
  color: #fff;
  padding: 20px;
}
.dark-theme input[type="checkbox"] {
  accent-color: purple;
  filter: invert(1) hue-rotate(180deg);
}
.dark-theme input[type="radio"] {
  accent-color: red;
  filter: invert(1) hue-rotate(180deg);
}

<div class="dark-theme">
  <label><input type="checkbox"/> 未勾选</label><br/>
  <label><input type="checkbox" checked="checked"/> 已勾选</label><br/>
  <label><input type="checkbox" disabled="disabled"/> 已禁用</label><br/>

  <hr/>

  <label><input type="radio" name="related"/> 未勾选 A</label><br/>
  <label><input type="radio" name="related"/> 未勾选 B</label><br/>
  <label><input type="radio" name="related"/> 未勾选 C</label><br/>
  <label><input type="radio" name="related" checked="checked"/> 已勾选 D</label><br/>
  <label><input type="radio" name="related" disabled="disabled"/> 已禁用</label><br/>
</div>

补充说明 #

accent-color目前在全球主流浏览器中支持率极高，仅IE浏览器不支持。

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