Animation background color

[Lorella Caglio]

Hi, I have a custom style for toggle switch button:

   

.e-switch-wrapper .e-switch-inner.e-switch-active,

    .e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on {

        background-color: #6c757d;

        border-color: #6c757d;

    }

    .e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {

        background-color: #6c757d;

        border-color: #6c757d;

    }

    .e-switch-wrapper:hover .e-switch-inner.e-switch-active {

        background-color: #6c757d;

        border-color: #6c757d;

    }

it works, but during the transition from "off" to "on" there is a blue background that disappears when the transition ends.

There is a way to remove this blue?

Thanks

[Gayathri KarunaiAnandam]

Hi Lorella, 

Thank you for contacting Syncfusion support. 

We have checked your reported query.  We can change the background color during transition by overriding default CSS class “.e-switch-wrapper .e-switch-on”  as demonstrated in the below code snippet. 

Index.razor 

<style> 

    .e-switch-wrapper .e-switch-on { 

        background-color: transparent; 

    } 

</style 

 

For your reference, we have prepared a sample based on your requirement. Please check the below link. 

Sample:https://www.syncfusion.com/downloads/support/forum/163533/ze/Toggle_switch1090530172 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Lorella Caglio]

Ok, now it'is perfect!

Thank you for support.

[Gayathri KarunaiAnandam]

Hi Lorella, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K