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

Community Tip - Have a PTC product question you need answered fast? Chances are someone has asked it before. Learn about the community search. X

How to change a color of toggle widget?

yhwan
1-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.

1 ACCEPTED SOLUTION

Accepted Solutions
mneumann
16-Pearl
(To:yhwan)

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

View solution in original post

1 REPLY 1
mneumann
16-Pearl
(To:yhwan)

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

Top Tags