Materialize çerçevesindeki onay kutusunun rengini değiştirme

Question

Şu anda Materialize çerçevesiyle çalışıyorum ve doldurulmuş onay kutusunun rengini varsayılan olarak yeşil renkte olduğundan değiştirmenin mümkün olduğunu merak ediyorum.

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

Herhangi fikirler

mutluluk duyacağız. Teşekkür

Answer 1

Bu onay kutusunu türüne bağlıdır

.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

kullandığınız etiketin sonra pseudo-element stil edecek onay kutusu girişine Sınıf ekleme - İçi dolu sınıf veya olmadan. CSS renk anahtar kelimesini ihtiyaç duyacağınız yere koymalıydınız ... ihtiyacınız olan renk için 'indigo'yu değiştirmeliyim.

*** Not - Ligthen ve Darken sınıfları bununla çalışmaz.

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