Skip to content

Latest commit

 

History

History
95 lines (75 loc) · 2.41 KB

switch-change-background-color.md

File metadata and controls

95 lines (75 loc) · 2.41 KB
title description type page_title slug position tags ticketid res_type
Change the Switch Background Color
How to customize the Blazor Switch styles and change the background colors for all states.
how-to
How to Change the Switch Background Color
switch-kb-change-background-color
switch, styles
1546317
kb

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.

caption 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; }
}

See Also

  • Override and customize the Blazor theme CSS