Skip to main content
1-Visitor
May 27, 2021
Solved

how to change the hover background color of the toggle button's Oval and Rectangle using custom CSS

  • May 27, 2021
  • 1 reply
  • 2108 views

how to change the hover background color of the toggle button's Oval and Rectangle using custom CSS, it  can be changed through the properties but when i ON the toggle button, the same hover color applied for the ON mode also, which creating issues, can we have different hovers for the OFF and ON mode of the toggle button. please provide me the CSS code for this

Best answer by PEHOWE

@AA_9130612 

Here is some CSS which will adjust some attributes of the toggle button. I am not sure I have gotten the item you are looking to adjust. Let me know if you need more.

/* adjust label text color and backgroud and border */
.widget-ptcstogglebutton::part(label) {
 background: orange;
 border-color: red;
 border-width: 4px;
 color: green;
}
/* Set background of toggle button */
.widget-ptcstogglebutton::part(rectangle) {
 background: orange;
 border-color: green;
 border-width: 4px;
}
/* set color of dot in slide */
.widget-ptcstogglebutton::part(oval) {
 background: fuchsia;
}
/* adjust toggle when checked */
.widget-ptcstogglebutton:not([disabled])[checked]::part(rectangle) {
 background: greem;
 border-color: yellow;
 border-width: 4px;
}

1 reply

PEHOWE17-PeridotAnswer
17-Peridot
May 27, 2021

@AA_9130612 

Here is some CSS which will adjust some attributes of the toggle button. I am not sure I have gotten the item you are looking to adjust. Let me know if you need more.

/* adjust label text color and backgroud and border */
.widget-ptcstogglebutton::part(label) {
 background: orange;
 border-color: red;
 border-width: 4px;
 color: green;
}
/* Set background of toggle button */
.widget-ptcstogglebutton::part(rectangle) {
 background: orange;
 border-color: green;
 border-width: 4px;
}
/* set color of dot in slide */
.widget-ptcstogglebutton::part(oval) {
 background: fuchsia;
}
/* adjust toggle when checked */
.widget-ptcstogglebutton:not([disabled])[checked]::part(rectangle) {
 background: greem;
 border-color: yellow;
 border-width: 4px;
}
15-Moonstone
June 7, 2021

@AA_9130612 :If the previous response answered your question, please mark it as the Accepted Solution.