Why cannot change checkbox color whatever I do? [duplicate]

Question

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 1

Technically, it is possible to change the color of anything with CSS. As mentioned, you can't change the background-color or color but you can use CSS filters. For example:

input[type="checkbox"] { /* change "blue" browser chrome to yellow */   filter: invert(100%) hue-rotate(18deg) brightness(1.7); } 

If you are really looking for design control over checkboxes though, your best bet is to do the "hidden" checkbox and style an adjacent element such as a div.