Changing switch color

Topic: Changing switch color

jouvrard pro asked 7 years ago

Hello, I try to use switchs on a webpage, but I can't change there colors, which is Always purple. Here is my code:

<div class="switch success-switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>

I also tried directly on the sample page in the Quick Start Guide, but the result is the same. A solution? :)

Add comment

jouvrard pro answered 7 years ago

0 0 Best answer

I didn't see the "CSS" tab in the switch page, sorry… :)

Piotr Glejzer staff commented 7 years ago

It's no problem. But your idea to add different colors with class is good! I'm gonna think more about this. Have a nice day.

Add comment

Piotr Glejzer staff answered 7 years ago

1 0 Best answer

Hi, you have to add this css code to your style tag or another css file. Here is a exmaple with another colors.

    .switch label input[type=checkbox]:checked+.lever {

    background-color: #1ffd01;

}

.switch label input[type=checkbox]:checked+.lever:after {

    background-color: #1201fa ;

}

Best,

Piotr

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.9
Device: PC
Browser: All
OS: Windows 10
Provided sample code: No
Provided link: No

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets