KeepMove KeepMove - 22 days ago 6
CSS Question

css - Why Cannot Change Checkbox Color Whatever I Do?

I try to style checkbox background color, but it won't change whatever I do. I am using firefox 29 latest.

Is there some rule changes in css or may be in the browser?

CSS:

input[type="checkbox"] {
background: #990000;
}

.chk {
background-color: #990000;

}


Here is a demo http://jsfiddle.net/6KXRg/

Answer

Checkboxes are not able to be styled. You would need a third party js plugin there are many available.

If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.

The same problem will arise when trying to style that little down arrow on a drop-down select element.