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

Question

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

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

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

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

非常感谢任何帮助。

Answer 1

您可以在您的自定义样式 sheet 上添加自定义样式到右上方 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>

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

Change the Border Color of the empty (un-checked) check box in Materialize

html

css

checkbox

materialize

border-color