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

I had the same issue, trying to use large inputs and had a very small checkbox. After some searching, this is good enough for my needs:

input[type='checkbox']{
  width: 30px !important;
  height: 30px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance:none;
  outline: 2px solid lightblue;
  box-shadow: none;
  font-size: 2em;
}

JSFiddle

Maybe someone will find it useful.