Change flag color in Materialize structure

Question

I am currently working with Framework Materialize and am wondering if it is possible to change the color of the filled checkbox, since it is the default by default.

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

Any ideas would be appreciated. Thanks

Answer 1

Add a class to the check box that will stylize after the label pseudo-element

 .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

It depends on the type of flag used - with or without a filled class. You will need to place the CSS keyword as needed ... just replace my "indigo" with whatever color you need.

*** Note. The Ligthen and Darken classes will not work with this.

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