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 w

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: