28234 sujets

CSS et mise en forme, CSS3

Label[selected="selected"] ?

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)
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)
Sujet clos
Aller à