Change the Switch Background Color
Environment
| Product | Switch for Blazor |
Description
How to change the Switch background color?
How to customize the background styles of only one Switch on the page, if there are many?
What CSS class to change the Switch background color when it has focus?
Solution
Add custom CSS rules to the app, which override the default styles and apply custom background color for on, off, focused and hover state.
The example below uses a Class parameter to render a custom CSS class to one of the Switches. To target all Switch instances on the page or in the app, remove the .my-switch class from the component declaration and the CSS code.
Blazor Switch with custom background styles
<p>
Custom styles:
<TelerikSwitch @bind-Value="@Value"
Width="70px"
OnLabel="Yes"
OffLabel="No"
Class="my-switch" />
Default styles:
<TelerikSwitch @bind-Value="@Value"
Width="70px"
OnLabel="Yes"
OffLabel="No" />
</p>
<p>
<label> Toggle Switch State: <TelerikCheckBox @bind-Value="@Value" /> </label>
</p>
<style>
/* ON - regular and hover state */
.my-switch.k-switch-on .k-switch-track,
.my-switch.k-switch-on:hover .k-switch-track {
background-color: #3c3;
color: #fff;
}
/* ON - focused state */
.my-switch.k-switch-on.k-focus .k-switch-track {
background-color: #060;
color: #fff;
}
/* OFF - regular and hover state */
.my-switch.k-switch-off .k-switch-track,
.my-switch.k-switch-off:hover .k-switch-track {
background-color: #ccc;
color: #000;
}
/* OFF - focused state */
.my-switch.k-switch-off.k-focus .k-switch-track {
background-color: #666;
color: #fff;
}
</style>
@code {
bool Value { get; set; }
}