更改实物化中的空（未选中）复选框的边框颜色

Question

我发现在选中时更改实际复选标记的颜色的说明，但我试图弄清楚如何更改颜色的盒子。

我把箱子放在较暗的背景上，很难看清，所以我想让它更轻。

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

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