cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to change a color of toggle widget?

SOLVED
Newbie

How to change a color of toggle widget?

Hi

A default color of toggle widget is red.

like this..

I tried to change it, but I couldn't do it.

I referenced here. https://codepen.io/Bradley_Lancaster/pen/jPzEbz

If it is possible, please give me an idea.

Thanks.

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to change a color of toggle widget?

Hi,

the toggle has basically two properties.

I've assigned the "ToggleMe" class to the Toggle Widget to control it's background color and the font color. The style sheet like this:

.ToggleMe {

  color: #2379FF;

  background-color: transparent;

}

For the actual background you can use

.toggle.toggle-assertive input:checked + .track {

    border-color: green;

    background-color: green;

}

Despite it's being a bit too green, it works quite nice.

One controls the actual track color, the other the border around the Widget.

(It will be for ALL Toggle Widgets you're using though)

I hope that helps

Cheers

/Michael

1 REPLY 1

Re: How to change a color of toggle widget?

Hi,

the toggle has basically two properties.

I've assigned the "ToggleMe" class to the Toggle Widget to control it's background color and the font color. The style sheet like this:

.ToggleMe {

  color: #2379FF;

  background-color: transparent;

}

For the actual background you can use

.toggle.toggle-assertive input:checked + .track {

    border-color: green;

    background-color: green;

}

Despite it's being a bit too green, it works quite nice.

One controls the actual track color, the other the border around the Widget.

(It will be for ALL Toggle Widgets you're using though)

I hope that helps

Cheers

/Michael