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

Yes, you can. Based on knowledge from colleagues here and researching on web, here you have the best solution for styling a checkbox without any third-party plugin:

input[type='checkbox']{
  width: 14px !important;
  height: 14px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: 1px solid gray;
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;
  background: red;
}

input[type='checkbox']:checked:after {
  content: '✔';
  color: white;
}