Comment puis-je obtenir un pseudo-élément css: coché pour fonctionner dans IE8 sans Javascript?

Question

J'ai deux boutons radio, je dois définir la couleur d'arrière-plan au clic. Mon code fonctionne dans tous les navigateurs sauf IE8. Est-ce possible que cela fonctionne pour IE8 sans utiliser 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

Alors que IE8 comprend les sélecteurs frères adjacents, il ne comprend pas le pseudo-élément checked, vous ne pouvez donc malheureusement pas rendre votre code convivial pour IE8 en utilisant uniquement CSS.

Jetez un coup d'oeil à Selectivizr ou IE7.js pour une solution JavaScript.

Answer 2

Vous pouvez essayer ceci:

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