Change Color of Switch Circle

Radzen.Blazor Components
1

Is there a way to change the color of only the circle part of the switch? I tried using the example from this post:

but this changes only the background color and leaves the switch circle the default white/blue for unchecked/checked states.

.rz-switch.rz-switch-checked .rz-switch-circle { 
   background: red !important;
}

.rz-switch .rz-switch-circle { 
   background: green !important;
}
2

Hi @evan,

You can use the following css variables to change the circle background color:

:root {
    --rz-switch-circle-background-color: red;
    --rz-switch-checked-circle-background-color: red;
}
3

That did exactly what I needed. Thank you!

Is there a consolidated reference somewhere for all the radzen CSS classes?

4

No, there isn't as they are too many. The easiest thing is to use the browser developer tools an inspect the element of interest.