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

Question

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/

Liliuokalani

If the browser doesn't support the CSS selector, and in this case there's no alternative to :checked, then I'm afraid the answer is 'no.' – Aggregation

For folks finding this topic please note: In all browsers but IE8 you can CSS style the checked state without the use of JS. The answer below describes how one can support IE8, with the use of JS. – Liliuokalani

Answer 1

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.

Wares

Answer 2

You can try this:

input[checked=checked] + label{
    background:red;
}

Ferine

This does work if the page loads with checked="checked" in place. But be warned that unchecking the input will not change it's appearance. – Urethra