如何为单个checkbox修改背景色？支持同页面多框异色且用style标签

我懂你想要的效果——给页面上不同的未选中checkbox设置不一样的背景色，而且希望只通过<input>标签的style属性来实现。之前直接改background-color没生效很正常，因为原生checkbox的样式被浏览器默认样式锁死了，咱们用个简单的CSS技巧就能解决这个问题：

第一步：先加一段基础CSS #

先在页面的<style>标签里加这段全局样式，用来“替换”原生checkbox的外观，这样咱们才能自定义背景色：

/* 移除浏览器默认的checkbox样式 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 5px 0 0;
  position: relative;
  cursor: pointer;
}

/* 模拟未选中状态的checkbox外观，用CSS变量接受自定义颜色 */
input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--checkbox-unchecked-bg, #e0e0e0); /* 默认背景色 */
  border: 1px solid #999;
  border-radius: 3px;
}

/* 可选：模拟选中状态的样式（保持直观的选中效果） */
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: white;
  background-color: #2196F3; /* 选中状态的背景，也可以用变量自定义 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

第二步：给单个Checkbox设置专属背景色 #

现在你只需要在每个<input type="checkbox">的style属性里定义--checkbox-unchecked-bg这个CSS变量，就能单独指定它未选中时的背景色了：

<!-- 未选中背景为淡粉色 -->
<input type="checkbox" style="--checkbox-unchecked-bg: #ffd6d6;">
<label>粉色背景选项</label>

<!-- 未选中背景为淡绿色 -->
<input type="checkbox" style="--checkbox-unchecked-bg: #d6ffd6;">
<label>绿色背景选项</label>

<!-- 用默认背景色的选项 -->
<input type="checkbox">
<label>默认背景选项</label>

小提示 #

• 如果连选中状态的背景色也想单独设置，只要把CSS里选中状态的background-color改成var(--checkbox-checked-bg, #2196F3)，然后在input的style里加--checkbox-checked-bg: 你的颜色就行。
• appearance: none 是核心，它能让我们摆脱浏览器对checkbox样式的控制，这样伪元素才能生效。

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