How can I get a css pseudo element :checked to work in IE8 without Javascript?

nthChild picture nthChild · Jul 26, 2013 · Viewed 22.5k times · Source

I have two radio buttons, I need to set the background color on click. My code works in all browsers except for IE8. Is this possible to get this to work for IE8 without the use of Javascript?

<form>
    <input type="radio" id="m" name="gender" value="male">
    <label for="m">male</label>
    <input type="radio" id="f" name="gender" value="female">
    <label for="f">female</label>
</form>

input:checked + label{
    background:red;
}

http://jsfiddle.net/chrimbus/sXjyL/3/

Answer

Renato picture Renato · Jul 26, 2013

While IE8 understands adjacent sibling selectors, it doesn't understand the checked pseudo-element, so, unfortunately, you can't make your code IE8-friendly by using CSS only.

Take a look at Selectivizr or IE7.js for a JavaScript solution.