CSS复选框：为每个选中的.option-input设置独立背景色

嘿，我来帮你搞定这个问题！你想要给每个.option-input复选框设置选中时独有的背景色，其实有几种简单的实现方式，我给你一步步拆解：

首先先把你没写完的基础CSS补全（看起来最后position: relati应该是position: relative）：

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
}

方法一：纯CSS添加自定义类（推荐，兼容性好） #

这种方法适合颜色固定的场景，给每个复选框加一个独特的类，然后针对这个类的:checked状态写样式：

示例HTML #

<!-- 给每个复选框添加独特的类，比如option-red、option-blue -->
<label>
  <input type="checkbox" class="option-input option-red"> 红色选项
</label>
<label>
  <input type="checkbox" class="option-input option-blue"> 蓝色选项
</label>
<label>
  <input type="checkbox" class="option-input option-green"> 绿色选项
</label>

对应的CSS #

/* 选中时的红色背景 */
.option-input.option-red:checked {
  background-color: #e74c3c;
}

/* 选中时的蓝色背景 */
.option-input.option-blue:checked {
  background-color: #3498db;
}

/* 选中时的绿色背景 */
.option-input.option-green:checked {
  background-color: #2ecc71;
}

/* 可选：给选中的复选框加个对勾标记，提升视觉效果 */
.option-input:checked::after {
  content: '✓';
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法二：利用data属性+JS（灵活，适合动态颜色） #

如果你的颜色需要动态设置，或者不想写太多CSS类，可以用data-*属性存储颜色值，再用JS监听复选框状态来切换背景：

示例HTML #

<label>
  <input type="checkbox" class="option-input" data-color="#e74c3c"> 红色选项
</label>
<label>
  <input type="checkbox" class="option-input" data-color="#3498db"> 蓝色选项
</label>
<label>
  <input type="checkbox" class="option-input" data-color="#f39c12"> 橙色选项
</label>

对应的JS代码 #

// 获取所有.option-input复选框
const checkboxes = document.querySelectorAll('.option-input');

// 给每个复选框添加状态监听
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      // 选中时设置为data-color里的颜色
      this.style.backgroundColor = this.dataset.color;
    } else {
      // 未选中时恢复默认背景色
      this.style.backgroundColor = '#cbd1d8';
    }
  });
});

这样你只需要在HTML里修改data-color的值就能轻松切换选中时的背景色，不用改动CSS~

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