Why cannot change checkbox color whatever I do?

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 browse

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.

Answer 2

Can be very simplified like that :

input[type="checkbox"]{
    outline:2px solid red;
    outline-offset: -2px;
}

Works without any plugin :)