arnuga3 arnuga3 - 1 year ago 529
CSS Question

Change color of checkbox in Materialize framework

I am currently working with Materialize framework and wondering is it possible to change the colour of the filled-in checkbox as it is green on 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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download