Valid CSS not working in Internet Explorer 11

Question

As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.

Does anyone have any ideas what is wrong?

/* CSS used here will be applied after bootstrap.css */

.demo {
  padding:50px;
}

.demo label{
   top:3px; left:15px;
   margin-right:30px;     
   position:relative;     
}  


input.faChkRnd, input.faChkSqr {
   visibility: hidden;
}

input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
   visibility: visible;
   font-family: FontAwesome;
   font-size:25px;height: 17px; width: 17px;
   position: relative;
   top: -3px;
   left: 0px;
   background-color:#FFF;
   display: inline-block;
}

input.faChkRnd:checked:after {
   content: '\f058';
}

input.faChkRnd:after {
   content: '\f10c';
}

input.faChkSqr:checked:after {
   content: '\f14a';
}

input.faChkSqr:after {
   content: '\f096';
}

Edited

So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.

Answer 1

I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.

The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/

The 3rd (black colored) checkbox works in IE but the other 2 don't. It works by using the sibling selector to decide which icon to show.

.works-in-ie input[type="checkbox"]:checked ~ .checked
{
    display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
    display: inline-block;
}

.works-in-ie input[type="checkbox"] {
    display: none;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>

---

Here is a screenshot of this answer and the code snippet working in IE11: