How to set chrome flag color

Question

In my application, I show a graph with legends. Legends have colored flags. Below is the code for the checkbox, which works fine in IE, but the color does not appear in ChromeandFirefox

<input type="checkbox" style="background-color:#d65aef;">

Please tell me what to do to get it working in IE, Chromeand Firefox. I have to use the hex color used in this code.

Answer 1

Form controls, such as checkbox, radio, select, etc., using their own style platform, based on the operating system theme. You can reset using and properties . But these properties will also reset the control dimensions and may be something else, so you will need to manually add the width / height: -moz-appearance-webkit-appearance

input[type=checkbox] {
     background: red;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 16px;
    width: 16px;
}

In addition, the flag must be provided with state rendering:

input[type=checkbox]:checked {
     background-image: url(/*custom checked icon url*/);
}

Answer 2

Close inputin span(or div) and set the color span.

<span style="background-color:#d65aef;"><input type="checkbox" class="base" name="w3wp" style="background-color:#d65aef;" value="w3wp" checked="" onclick="legendChanged();" alt="fd" title="w3wp"></span>