在 Materialise 框架中更改复选框的颜色

Question

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

Answer 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>

Answer 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>

Answer 3

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/

Answer 4

如果要更改复选框的所有颜色：

input[type="checkbox"]:checked + span:not(.lever)::before{border:2px solid transparent;border-bottom:2px solid #006AB5;border-right:2px solid #006AB5;background:transparent;}

Answer 5

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/

Answer 6

CSS code

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML code

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

Demo

JSFiddle demo

Answer 7

I wanted to change the background color of a materialize checkbox.

This is how i did it after following the tips above. CSS Code:

.checkbox[type="checkbox"]:checked + span:not(.checkbox)::after {
    border: 2px solid transparent;
    background-color: var(--color-primary);
}