Materializeフレームワークのチェックボックスの色を変更しました

Question

現在、Materializeフレームワークを使用しています。デフォルトでは緑のように塗りつぶしチェックボックスの色を変更することができますか？

<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" /> 
<label for="filled-in-box">Filled in</label> 

任意のアイデアがあります。満たされたイン - おかげ

Answer 1

これは、あなたが使用し、チェックボックスの種類によって異なり、ラベルの後に擬似要素

.checkbox-orange[type="checkbox"].filled-in:checked + label:after{ 
 
    border: 2px solid #ff9800; 
 
    background-color: #ff9800; 
 
}

<input type="checkbox" class="filled-in checkbox-orange" id="filled-in-box" checked="checked" /> 
 
<label for="filled-in-box"></label>

Answer 2

のスタイルをしますチェックボックスの入力にクラスを追加します。クラスなし。 あなたはCSSカラーキーワードをneedbeとして入れなければなりません...あなたが必要とする色のために私の 'インディゴ'を置き換えてください。

***注 - LigthenクラスとDarkenクラスはこれでは機能しません。

.checkbox-indigo[type="checkbox"] + label:before{ 
    border: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo[type="checkbox"]:checked + label:before{ 
    border: 2px solid transparent; 
    border-bottom: 2px solid indigo; 
    border-right: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo.filled-in[type="checkbox"] + label:after{ 
    border: 2px solid indigo; 
    background: transparent; 
} 
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:after{ 
    background: indigo; 
} 
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:before{ 
    border-top: 2px solid transparent; 
    border-left: 2px solid transparent; 
    border-right: 2px solid #fff; 
    border-bottom: 2px solid #fff; 
} 

http://embed.plnkr.co/zWaJVtsAVXxs0fVLmxRH/