how to set checkbox color for chrome

Question

In my application I am showing a graph with legends. Legends have colored checkboxes. Below is code for a checkbox that works fine in IE but the color does not appear in Chrome and Firefox

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

Please tell me what should I do so that it works in IE,Chrome and Firefox. I have to use the hex color as used in the given code.

Answer 1

Form controls like checkbox, radio, select and etc using a platform-native styling based on the operating system's theme. You can reset it by using -moz-appearance and -webkit-appearance properties. But this properties will also reset sizes of control and may be something else, so you will need to add width/height manually:

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

Also for checkbox you need to provide a checked state render:

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

Answer 2

Close input into span (or div) and set span color.

<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>