更改實物化中的空（未選中）複選框的邊框顏色

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>