html - 如何更改 Materialise 中空(未选中)复选框的边框颜色

Question

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

我把盒子放在较暗的背景上，很难看清，所以我想让它变亮。

我已经尝试了大多数其他元素在 Materialise 中观察到的正常颜色类概念，但空的复选框边框似乎并没有遵循它。

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

Answer 1

您可以在自定义样式表上将自定义样式添加到右侧 Materialize 中，您可以根据自己的情况使用。

[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>