Cambia colore della casella di controllo in Materialize framework

Question

Attualmente sto lavorando con Materialize framework e mi chiedo se sia possibile cambiare il colore della casella di controllo compilata in quanto è di default verde.

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

Qualsiasi idea sarebbe apprezzata. Grazie

Answer 1

Aggiungere una classe all'ingresso casella di controllo che sarà lo stile del dopo pseudo-elemento dell'etichetta

.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

Questo dipende dal tipo di casella di controllo si utilizza - compilata classe o senza Dovrai inserire la parola chiave CSS come necessario ... basta sostituire il mio 'indigo' per qualsiasi colore tu desideri.

*** Nota: le classi Ligthen e Darken non funzionano con questo.

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