Hoffs Hoffs - 1 year ago 94
CSS Question

Changing background color of switch label with checkbox type?

So I am using materializecss framework for my website and I tried adding a as seen here. But I am having trouble with changing the color of activated switch. It uses complicated CSS, at least for me.

.switch label input[type=checkbox]:checked + .lever {
background-color: #84c7c1;

For example as seen here you can see this is the default CSS which makes the background of the switch cyan. And I cant get it to change by using a id.
I tried doing it like this:

.switch label input[type=checkbox]#profile-switch:checked + .lever#profile-switch {
background-color: #ffffff;

But it didn't seem to work.

Answer Source
<input id="profile-switch-input" type="checkbox" checked="">
<span id="profile-switch-lever" class="lever"></span>


.switch label input#profile-switch-input[type="checkbox"]:checked + #profile-switch-lever.lever::after {
    background-color: #fff;


enter image description here


enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download