Switch Checked Text Color

1 Answer 74 Views
Switch
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
David Ocasio asked on 19 Aug 2021, 12:35 PM
Is there a way I can affect the text color for the checked state of the switch without hacking the theme. through htmlattributes or something like that. I want in in one place not globally.

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 24 Aug 2021, 06:52 AM

Hi David,

To achieve the targeted functionality, what you can do is to add a custom class to the Switch component which colors you want to change. This custom class can be added with HtmlAttributes as demonstrated below.

@(Html.Kendo().Switch()
    .Name("switch")
    .HtmlAttributes(new { @class="switch-change-color" })
    .Events(ev => ev.Change("onChange"))
    .Messages(m=>m.Checked("Yes"))
)

Once the class is applied, use the following CSS to style the "ON" and "OFF" states of the Switch component. 

.switch-change-color > .k-switch-container > .k-switch-label-on {
    color: greenyellow;
}

.switch-change-color > .k-switch-container > .k-switch-label-off {
    color: orange;
}

I hope the above details will help you implement what you need in your application.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Switch
Asked by
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Petar
Telerik team
Share this question
or