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
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.
You can use accent-color property in css to change background color of both checkbox and radio buttons.
Just use display: inline-block; on :after , apply width and height , and also apply a smooth transition.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With