Modifier le label d'un champ input.

Bonjour,

J'ai un formulaire suivant :

<form>
<label>Texte 1 <input class="requis" /></label>
<label>Texte 2 <input class="requis" /></label>
<label>Texte 3 <input /></label>
</form>

Je souhaiterai (en CSS) modifier le contenu du label en fonction du caractère "requis" du champs.

J'ai pensé à une truc du genre :

label > input.requis:after {
     background-color:red;
}

Mais mon code ne s'applique qu'au champ Input et non au label.

D'où ma question : est-ce que je peux toucher les "label" qui ont un fils Input de classe "requis" ?
Ou bien , est-ce que je fais fausse route....

Je vous remercie

A+ / F.
Modifié par Kleduts (09 Dec 2010 - 23:26)

Il n'existe (malheureusement) pas de sélecteur ascendant en CSS. Tu dois donc appliquer ta classe au label et non à l'input.

ok
C'est dommage car, fonctionnellement parlant, la contrainte est bien sur le champ. Et je veux "traduire" cette contrainte sur le label. On est bien dans l'esprit CSS.

Est-ce qu'il y aura une évolution de ce genre dans CSS 3 ?

Mon pb initial vient d'Opéra qui modifie l'affichage des champs (cadre autour) lorsqu'on utilise "content" dessus. Si quelqu'un à une idée, je suis preneur.

Bonne journée

A+ / F.

Kleduts a écrit :
Est-ce qu'il y aura une évolution de ce genre dans CSS 3 ?

Malheureusement pas. Quelques personnes ont commencé à en parler et à donner des pistes d'implémentation mais il n'y a rien de concret pour l'instant.

Si tu ne souhaites pas modifier ta classe et l'appliquer sur le label (pour une raison que j'ignore), tu peux éventuellement passer par javascript où l'élément parent est sélectionnable facilement.

Rappel accessibilité qui va bien:
1. Il est préférable d'utiliser des labels explicites (avec attribut for qui va bien).
2. L'information «ce champ est requis» n'est pas de la mise en forme et n'a donc rien à faire (exclusivement) en CSS.

Une proposition:

<form ...>
  <p class="required">
    <label for="hop">Hop <span>(requis)</span></label>
    <input id="hop" ...>
  </p>
  <p class="required">
    <label for="boum">Boum <span>(requis)</span></label>
    <input id="boum" ...>
  </p>
  <p>
    <label for="tchac">Tchac</label>
    <input id="tchac" ...>
  </p>
</form>

Juste une idée comme ça en passant et une classe sur un parent commun non ?

Et hop grilled par Florent ça m'apprendra à réfléchir lentement ...