Html Checkbox : Change Color

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 follow

Solution 1:

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

So it should be like this:

<divstyle="background-color: yellow;"><inputtype="checkbox" /></div><divstyle="background-color: red;"><inputtype="checkbox" /></div><divstyle="background-color: green;"><inputtype="checkbox" /></div>

Demo.

Solution 2:

It will not work even in the new Opera, so I recommend to wrap it with a div container.

<div id="check1_Container">
<label for="check1">Check box 1</label>
<input type="checkbox"id="check1" style="background-color: yellow" />
</div>