Vue项目中修改复选框背景色后如何保持勾选标记为白色？

问题出在accentColor属性会同时控制复选框的背景色和勾选标记的颜色，无法单独拆分两者样式。要实现背景色自定义、勾选标记保持白色，需要通过CSS自定义样式结合JavaScript动态赋值来实现：

步骤1：添加自定义CSS样式 #

重置复选框默认外观，用伪元素模拟勾选标记，通过CSS变量控制颜色：

.categoryInput {
  /* 重置默认浏览器样式 */
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.categoryInput:checked {
  /* 用自定义变量控制选中时的背景色 */
  background-color: var(--checkbox-bg, #007bff);
  border-color: var(--checkbox-bg, #007bff);
}

/* 固定白色的勾选标记 */
.categoryInput:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

步骤2：修改JavaScript函数 #

不再使用accentColor，改为通过设置CSS变量动态修改背景色：

input(){
  var color = JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons;
  let collection = document.getElementsByClassName("categoryInput");
  for (let i = 0; i < collection.length; i++) {
    // 给每个复选框设置背景色变量
    collection[i].style.setProperty('--checkbox-bg', color);
  }
}

原理说明 #

• appearance: none完全重置复选框的默认样式，摆脱浏览器accentColor的统一控制
• 用:checked伪类定义选中状态的背景色，通过CSS变量实现动态赋值
• 用::after伪元素模拟固定白色的勾选标记，确保颜色不受背景色影响

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