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

【问题标题】：Change the Border Color of the empty (un-checked) check box in Materialize更改 Materialise 中空（未选中）复选框的边框颜色
【发布时间】：2017-08-07 09:59:19
【问题描述】：

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

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

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

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

非常感谢任何帮助。

【问题讨论】：

标签： html css checkbox materialize border-color

【解决方案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>

【讨论】：

太完美了！而且，相信我，我自己永远不会得到它，所以谢谢你！
很高兴我能帮上忙 :)