Input, Label et focus : tout un programme

Bonjour à tous,

Je souhaite lier le focus de mon input au style de mon label, pour que quand l'utilisateur remplisse un champ, le label soit gras et souligné. Quelqu'un aurait-il une solution en CSS ?

Merci d'avance,
Alexandre

PS : Dans le pire des cas, si vous avez une solution "propre" en JS, je suis preneur aussi.

PS2 : Il existait un topic sur le même sujet, publié en 2005 mais qui n'avait pas vraiment trouvé réponse. Je réitère la question dans l'espoir que les choses aient évoluées

Salut,

Pourquoi ne pas faire ainsi ? :

<label for="login">Login<input type="text" name="login" id="login" /></label>

Avec un

display:block

Je ne suis vraiment pas sur, mais pourquoi pas

Merci pour ta réponse rapide.

A priori, je doute que ça marche, car le problème est inverse.
La pseudo-classe focus ne marche pas sur label, donc mettre le input dans le label ne servira à rien. Il faudrait plutôt mettre le label dans le input, mais là c'est une autre paire de manches
Modifié par Alexandre Le Guyader (19 Jan 2007 - 02:05)

Pas d'idée ?

bonjour,

Idée :
les selecteurs adjacent :
xhtml :

<input type="text" value="mettre en gras le :"	id="texte"/>
<label for="texte">label</label>

css :

input:focus + label {font-weight:bold;}

Ensuite pour repasser visuellement le label devant l'input , le "float" peut etre de bons services.

GC

Bonjour,

gcyrillus a écrit :

<input type="text" value="mettre en gras le :"	id="texte"/>
<label for="texte">label</label>

css :

input:focus + label {font-weight:bold;}

Ensuite pour repasser visuellement le label devant l'input

A éviter pour des raisons d'accessibilité (respect de l'ordre logique étiquette / champ dans la structure, telle qu'elle sera notament lue par un lecteur d'écran)

La solution passe par javascript.

Une proposition pour javascript ? J'imagine qu'il faut passer par un onfocus/onblur mais comment faire pour le relier au style du label ?
Modifié par Alexandre Le Guyader (20 Jan 2007 - 17:26)