Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 300
arnuga3 Avatar asked Feb 08 '16 00:02

arnuga3


People also ask

Can we change checkbox color?

To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden. Example 1: Consider the example where HTML checkbox is styled using CSS. When the user clicks the checkbox, the background color is set to green.

How do I change the color of a fill in checkbox?

You can use accent-color property in css to change background color of both checkbox and radio buttons.

How can I change checkbox background color when checked?

Just use display: inline-block; on :after , apply width and height , and also apply a smooth transition.


1 Answers

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>
like image 96
Lawshe Avatar answered Sep 17 '22 14:09

Lawshe