Html CheckBox : Change Color

Question

During the developing of an .NET application I have came across a problem.

What I want to do, is to change the background color of a simple Html checkbox, so I have used the following HTML code:

<input type="checkbox" id="check1" style="background-color: yellow" />

This code works only with OPERA, and not with other browsers (Chrome, Firefox, Explorer)

So i have used also Javascript code:

document.getElementById("check1").style.backgroundColor = "yellow"

and JQuery sintax:

$("#check1").css("background-color", "yellow")

but the result is the same.

This code works if I use an HTML TextBox.

Can someone help me please ??

Solution

Wrap each checkbox into a div and then change the div's background-color.

So it should be like this:

<div style="background-color: yellow;">
<input type="checkbox" />
</div>
<div style="background-color: red;">
<input type="checkbox" />
</div>
<div style="background-color: green;">
<input type="checkbox" />
</div>

Demo.