Question

我已经找到了在检查时更改实际复选标记颜色的说明，但我正在尝试弄清楚如何更改框的颜色。

我将盒子放在较暗的背景上，很难看到，所以我想让它变得更轻。

我尝试过大多数其他元素在Materialize中观察到的普通颜色类概念，但空复选框边框似乎没有遵循它。

<span class="card-title">
    <input type="checkBox" id="{{_id}}" class="checkbox  selectFromWeb white"  />
    <label for="{{_id}}"></label>{{name.first}}
</span>

非常感谢任何帮助。

Answer 1

您可以在自定义样式表中将自定义样式添加到右侧实体化，在您可以使用的情况下。

[type="checkbox"].filled-in:not(:checked)+label:after{
  border: 2px solid #da4d4d;
}

使用您需要的颜色，只有当它没有覆盖您的实体样式时才使用!important

[type="checkbox"].filled-in:not(:checked)+label:after{
  border: 2px solid #da4d4d !important;
}

为您准备的工作示例。希望这很有帮助。

[type="checkbox"].filled-in:not(:checked)+label:after {
  border: 2px solid #da4d4d !important;
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">

<p>
  <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
  <label for="filled-in-box">Checked</label>
</p>
<p>
  <input type="checkbox" class="filled-in" id="filled-in-box2" />
  <label for="filled-in-box2">Unchecked</label>
</p>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

更改Materialize中空（未选中）复选框的边框颜色

1 个答案: