Change color of checkbox in Materialize framework
Solution 1
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>
Solution 2
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>
Solution 3
Sorry that I am late but I too faced the same problem recently so I am sharing how I fixed it (at least in my case)
When I was facing this problem, I looked up in almost all sites and forums but I didn't get a working solution that satisfied me. hence I went to the official css library https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css and changed the core values according to my needs.
For the checkbox tick mark, I need to change the color in two cases:
First is when the user check the box by mouse click, second is when the user press tab and pressing spacebar for checking the box.
So the following change might work for you:
[type="checkbox"].filled-in:checked+span:not(.lever):before{
border-right:2px solid cyan;
border-bottom:2px solid cyan;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after{
border:2px solid black;
background-color:black;
}
[type="checkbox"].filled-in.tabbed:checked:focus+span:not(.lever):after{
background-color:black;
border-color:black;
}
If you want the full code visit https://codepen.io/MrSrv7/pen/RwaNeyd
I have created a simple login form with HTML CSS and JS,
Demo/Preview here: https://mrsrv7.github.io/LoginForm/
Repository here: https://github.com/MrSrv7/LoginForm/
Solution 4
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/
Solution 5
If you want to change all colors of the checkboxes:
input[type="checkbox"]:checked + span:not(.lever)::before{border:2px solid transparent;border-bottom:2px solid #006AB5;border-right:2px solid #006AB5;background:transparent;}
arnuga3
Updated on July 27, 2022Comments
-
arnuga3 over 1 year
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
-
Stupid.Fat.Cat over 7 yearsI just tried this and it doesn't appear to work. Any idea if it's changed?
-
mlg87 almost 7 years@Stupid.Fat.Cat make it
label:before
instead of theafter
pseudo el