Chechbox Background-Color

[Unknown]

Hello,

I can't change the background-color of Syncfusion checkbox dynamically with JavaScript.
I get the color code via bdd, and I have to dynamically change the color of the checkbox.

Can you help me please ?

Thank you

[Saranya Dhayalan]

Hi Karim, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, you can customize the appearance of the CheckBox component using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the cssClass property. Please find the below code snippet: 

 

 

 

<ul> 

    <li> 

        <ejs-checkbox id="primary" checked="true" label="Checkbox" cssClass="e-primary"></ejs-checkbox> 

    </li> 

 

</ul> 

 

<ejs-button id="chngeColor" cssClass='e-primary' content="Change BGcolor"></ejs-button> 

 

<script> 

 

    document.getElementById('chngeColor').onclick = function () { 

 

        var chkboxObj = ej.base.getComponent(document.getElementById("primary"), "checkbox"); 

        chkboxObj.cssClass = "e-success"; 

    } 

</script> 

<style> 

 

    .e-checkbox-wrapper { 

        margin-top: 18px; 

    } 

 

    li { 

        list-style: none; 

    } 

 

    .e-checkbox-wrapper.e-primary:hover .e-frame.e-check { /* csslint allow: adjoining-classes */ 

        background-color: #e03872; 

    } 

 

    .e-checkbox-wrapper.e-success .e-frame.e-check, 

    .e-checkbox-wrapper.e-success .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */ 

        background-color: #689f38; 

    } 

 

    .e-checkbox-wrapper.e-success:hover .e-frame.e-check { /* csslint allow: adjoining-classes */ 

        background-color: #449d44; 

    } 

 

    .e-checkbox-wrapper.e-info .e-frame.e-check, 

    .e-checkbox-wrapper.e-info .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */ 

        background-color: #2196f3; 

    } 

 

    .e-checkbox-wrapper.e-info:hover .e-frame.e-check { /* csslint allow: adjoining-classes */ 

        background-color: #0b7dda; 

    } 

</style> 

 

Please find the below documentation link: 

 

https://ej2.syncfusion.com/aspnetcore/documentation/check-box/how-to/customized-checkbox/?no-cache=1 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Saranya D