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/

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.

Answer 2

You can try this:

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