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;
}

 Click Me

---

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