在 Materialise 框架中更改复选框的颜色

Question

我目前正在使用 Materialize 框架，想知道是否可以更改已填充复选框的颜色，因为它默认为绿色。

 <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
<label for="filled-in-box">Filled in</label>

任何想法，将不胜感激。谢谢

原文由 arnuga3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

向复选框输入添加一个类，它将设置标签的伪元素之后的样式

 .checkbox-orange[type="checkbox"].filled-in:checked + label:after{
     border: 2px solid #ff9800;
     background-color: #ff9800;
}

 <input type="checkbox" class="filled-in checkbox-orange" id="filled-in-box" checked="checked" />
<label for="filled-in-box"></label>

原文由 Lawshe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 Materialise 版本 1.0.0，语言标记与上面给出的不同。用于更改已填充复选框颜色（在我的示例中为蓝灰色）的标记和 CSS 现在如下所示：

 /* change colour of filled in check box */

.checkbox-blue-grey[type="checkbox"].filled-in:checked+span:not(.lever):after {
  border: 2px solid #607d8b;
  background-color: #607d8b;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<p>
  <label>
        <input type="checkbox" class="filled-in checkbox-blue-grey" checked="checked" />
        <span>Filled in</span>
      </label>
</p>

原文由 HamptonNorth 发布，翻译遵循 CC BY-SA 4.0 许可协议