Materializeの空の（チェックされていない）チェックボックスのボーダーカラーを変更してください

Question

チェックが入っているときに実際のチェックマークの色を変更する方法が見つかりましたが、色を変更する方法を見つけようとしていますボックスの。

私はボックスを暗い背景に置いています。見えにくいので、軽くしたいと思います。

他のほとんどの要素がマテリアライズで観察する通常のカラークラスの概念を試しましたが、空のチェックボックスの境界線はそれに続くようには見えません。

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