Gray checkboxes cross browser solution

Question

I have the following css in my app that makes my checkboxes much more gray. This solution will not work in IE 11. How can I fix this?

input[type=checkbox][disabled] {
  filter: invert(25%);
}

Answer 1

The filter css property is not supported by IE, even with -ms prefix. You can read about this at the MDN. So short answer: It is not possible to achieve this with the filter Property in IE.

You could try to write a workaround using the :before pseudo selector, like in the quick example below. I used a label while hiding the actual checkbox. Please note, that the appearance of checkboxes depend on the browser, so this "fake" checkbox may looks different than other enabled checkboxes, so I would recommend you to also style these! It is more work to do, but this is a workaround, not a solution ;)

input[type=checkbox][disabled] {
  display: none;
}

input[type=checkbox][disabled] + label:before {
  content: " ";
  display: inline-block;
  height: 12px;
  width: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid #aaa;
  border-radius: 2px;
  margin-right: 5px;
}

input[type=checkbox][disabled] + label {
  color: #aaa;
}

<input type="checkbox" id="1" disabled/>
<label for="1">Disabled</label>

If you actually want to know how to make custom checkboxes with CSS, you may want to take a look at this SO post, which already delivers a great answer to this problem :-)