Change color of checkbox in Materialize framework
Add a class to the checkbox input which will style the after pseudo-element of the label
.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>
With Materialize version 1.0.0 the language markup differs from that given above. The markup and the CSS to change the colour (in my case to blue-grey) of the filled-in checkbox now looks like this:
/* change colour of filled in check box */
.checkbox-blue-grey[type="checkbox"].filled-in:checked+span:not(.lever):after {
border: 2px solid #607d8b;
background-color: #607d8b;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<p>
<label>
<input type="checkbox" class="filled-in checkbox-blue-grey" checked="checked" />
<span>Filled in</span>
</label>
</p>
This depends on the type of checkbox you use - filled-in class or without. You'll have to put in the CSS color keyword as needbe... just replace my 'indigo' for whatever color you require.
*** Note - 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/