Farbe der Checkbox in Materialise framework ändern

Question

Ich arbeite derzeit mit Materialise Framework und frage mich, ob es möglich ist, die Farbe des ausgefüllten Kontrollkästchens zu ändern, da es standardmäßig grün ist.

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

Irgendwelche Ideen würden geschätzt. Dank

Answer 1

Fügen Sie eine Klasse der Checkbox Eingang, der

.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

Dies hängt von der Art der Kontrollkästchen Sie verwenden, um die nach dem Pseudoelement des Etiketts Stil - ausgefüllten in Klasse oder ohne. Sie müssen das CSS-Farbschlüsselwort als notbe setzen ... ersetzen Sie einfach mein "Indigo" für jede Farbe, die Sie benötigen.

*** Hinweis - Ligthen und Darken-Klassen funktionieren nicht.

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