color

[David Ocasio]

The default selected color for my switch based on my theme is a reddish color.

I need to occasionally change that  on a particular page (blue) .  I do not want to change it for every page.

How can I target an individual switch element through css or property.

 

 

Any help would be appreciated.

 

[Svetoslav Dimitrov]

Hello David,

You can use the Class parameter exposed for the Switch component. It will allow you to pass custom CSS class to the topmost wrapping HTML element of the component and use it to cascade styles to a specific instance. I have prepared a basic implementation that you can see below:

<style>
    .custom-formatting.k-switch-on span.k-switch-container{
        background-color: blue;
    }
</style>

<label>
    <TelerikSwitch @bind-Value="@isSelected" Class="custom-formatting" />
    @( isSelected ? "Selected" : "Not selected" )
</label>

@code {
    private bool isSelected { get; set; }
}

Regards,
Svetoslav Dimitrov
Progress Telerik