3

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

user2217039
  • 131
  • 2
  • 4
  • 11
  • 1
    http://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div Looks like there is an issue with firefox, chrome, and safari that prohibit this. Did a quick search and did not see a solution. – Michael Wheeler Jul 02 '13 at 17:56
  • The only way to change the checkbox itself is to do image replacement for the checkbox, Ex [on CSS-Tricks](http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/) – Ryan B Jul 02 '13 at 18:47

2 Answers2

4

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.

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
0

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>
bunjeeb
  • 1,096
  • 1
  • 17
  • 32
  • Totally right, I just removed it. I just mentioned it, if you want to change the style at runtime based on some logic – bunjeeb Jul 07 '13 at 07:03