如何用CSS变量动态设置Materialize复选框背景色？

问题根源 #

Materialize的filled-in复选框选中状态的样式，是通过相邻兄弟选择器控制span:not(.lever):after伪元素实现的。内联样式无法直接作用于伪元素，且伪元素无法读取同级input元素上的CSS变量——这就是你之前尝试失败的核心原因。

解决方案（无需自定义类，动态内联设置） #

1. 调整全局CSS选择器，支持父级变量 #

修改你的CSS样式，让复选框的选中样式读取父容器的CSS变量：

/* 覆盖Materialize默认的filled-in复选框选中样式 */
.checkbox-custom[type="checkbox"].filled-in:checked + span:not(.lever):after {
  background-color: var(--checkbox-color, #26a69a); /* 第二个参数为默认 fallback 颜色 */
  border-color: var(--checkbox-color, #26a69a);
}

2. 动态生成时给父容器设置内联变量 #

Materialize的复选框结构通常是label包裹input和span，我们把CSS变量设置在这个共同的父容器label上，伪元素就能继承到变量值：

静态HTML示例

<!-- 红色复选框 -->
<label style="--checkbox-color: #ff4444;">
  <input type="checkbox" class="filled-in checkbox-custom" />
  <span>红色选项</span>
</label>

<!-- 蓝色复选框 -->
<label style="--checkbox-color: #33b5e5;">
  <input type="checkbox" class="filled-in checkbox-custom" />
  <span>蓝色选项</span>
</label>

JavaScript动态生成示例

// 封装生成带颜色复选框的函数
function createColoredCheckbox(colorHex, labelText) {
  const label = document.createElement('label');
  // 给父容器设置CSS变量
  label.style.setProperty('--checkbox-color', colorHex);

  const input = document.createElement('input');
  input.type = 'checkbox';
  input.classList.add('filled-in', 'checkbox-custom');

  const span = document.createElement('span');
  span.textContent = labelText;

  label.append(input, span);
  return label;
}

// 批量生成示例
const colors = [
  { hex: '#ff9900', text: '橙色选项' },
  { hex: '#99cc00', text: '绿色选项' },
  { hex: '#aa66cc', text: '紫色选项' }
];

colors.forEach(item => {
  document.getElementById('checkbox-container').appendChild(createColoredCheckbox(item.hex, item.text));
});

原理说明 #

• CSS变量可通过父元素向下继承，span:not(.lever):after伪元素属于label的子元素，能读取到label上设置的--checkbox-color变量。
• 这种方式不需要为每种颜色创建单独的CSS类，完全通过内联变量动态控制，适配任意数量的颜色需求。

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