Change color of checkbox in Materialize framework

16,086

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;}
Share:
16,086
arnuga3
Author by

arnuga3

Updated on July 27, 2022

Comments

  • arnuga3
    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
    Stupid.Fat.Cat over 7 years
    I just tried this and it doesn't appear to work. Any idea if it's changed?
  • mlg87
    mlg87 almost 7 years
    @Stupid.Fat.Cat make it label:before instead of the after pseudo el