Background color

[Louis]

Hello,

I try to change the background color regarding ON or OFF without success (note that .k-switch and .k-switch-handle works perfectly) :

 

<style>
    .k-switch {
        font-size: 12px !important;
    }
    .k-switch-on  {
        background-color: green !important;
    }
    .k-switch-off  {
        background-color: red !important;
    }
    .k-switch-handle{
        background-color: chocolate !important;
    }
</style>

 

Thank you for your precious help.

[Nikolay]

Hi Louis,

To change the background color of the switch container depending on its position you could target it like below:

    <style>
      .demo-section {
        text-align: center;
      }
      .k-widget.k-switch-on .k-switch-container,
        /* override the mouse over selector */
      .k-switch-on:hover .k-switch-container {
        background-color: green;
      }
      .k-widget.k-switch-off .k-switch-container,
      /* override the mouse over selector */
      .k-switch-off:hover .k-switch-container {
        background-color: red;
      } 
    </style>

You could find this implementation demonstrated in the following Dojo demo: https://dojo.telerik.com/eCEKeVew/7. Please note that it is based on Kendo UI for jQuery but the CSS styles are equivalent for Kendo UI for ASP.NET Core projects.

Please try the above and let me know if you have any questions. In case I misunderstood the inquiry, please get back to me providing more details so I can further investigate.

Regards,
Nikolay
Progress Telerik

[Louis]

Hello Nikolay.  Works just FINE!

Thanks a lot again!  Have nice day overthere.