Label[selected="selected"] ?

Auteur
csseur666	# 17 Mar 2010 - 00:04:23
61 Posts	Bonsoir, Voici une liste d'images constituée comme ceci: <div id="list-avatars-choice"> <form action="avatar_change.php" method="post" id=""> <ul> <li> <input style="display: none;" name="avatar" id="mic" value="mic" type="radio"> <label for="mic" class=""><img src="../images/avatars/mic.png" title="Avatar mic.png"></label> </li> <li> <input style="display: none;" name="avatar" id="fred" value="fred" type="radio"> <label for="fred" class=""><img src="../images/avatars/fred.png" title="Avatar fred.png"></label> </li> </ul> <p> <input name="envoyer" value="Sélectionner cet avatar" class="button" type="submit"> </p> </form> </div> Comme vous le voyez, il s'agit de sélectionner son avatar dans le form. Voici la css: div#list-avatars-choice { margin-top: 10px; } div#list-avatars-choice ul { display: inline; } div#list-avatars-choice ul li { list-style-type: none; display: inline; margin: 0px 15px 0px 0px; } div#list-avatars-choice img { border: 1px solid #E1E1E1; padding: 3px; } div#list-avatars-choice img:hover { border: 1px solid #000000; } div#list-avatars-choice input[type="submit"] { margin-top: 8px; color: #003366; font: bold small 'trebuchet ms',helvetica,sans-serif; padding: 3px; } div#list-avatars-choice input[selected="selected"], div#list-avatars-choice label[selected="selected"] { border: thick solid black; } Je voudrais attribuer ne bordure différente aux avatars, lorsqu'on a sélectionné l'un d'entre eux. Je masque le bouton radio, il faut donc trouver un indicateur visuel de l'avatar sélectionné. [selected="selected"] ne semble pas fonctionner, ce n'est pas correct ? a++ Modifié par csseur666 (17 Mar 2010 - 00:07)
61 Posts
Heyoan	# 17 Mar 2010 - 00:40:11
Modérateur 8101 Posts	Salut, déjà il manque le alt à tes images. Ensuite : * ce n'est pas selected (réservé à l'élément OPTION) mais checked * de toute façon input[checked="checked"] ne sera pas modifié dynamiquement. * un élément LABEL n'est lui même jamais "checked" Donc pour faire ça sans JavaScript (ce qui serait plus portable) on peut utiliser la pseudo-classe CSS3 :checked ce qui donne : `div#list-avatars-choice input:checked + label img {` Modifié par Heyoan (17 Mar 2010 - 00:41) Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Aureance	# 17 Mar 2010 - 00:47:34
Bonjour. 482 Posts	Bonsoir, Voir : élément select et attribut selected. Il y a quelques exemples avec la doc… Forums : Les gens pressés lisent en diagonale et répondent de travers.
Bonjour. 482 Posts
csseur666	# 20 Mar 2010 - 11:53:18
61 Posts	Merci à vous deux
61 Posts