18041 sujets

Questions générales et questions de débutants

[Balise select] changer la couleur de l'option par défaut si conditio

J'expose mon problème : pour le moment, j'ai un petit formulaire qui contient une balise select. Cette balise contient des options de deux sortes, qui sont soit disponible et de couleur vertes, soit indisponibles, et dans une autre couleur.

Cela fonctionne très bien sauf qu'avant de cliquer sur le select, on ne sait pas si l'élément affiché est disponible ou non.

Exemple de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=iso-8859-1" />
		<title>Essai de style avec condition sur l'élement par défaut d'un select</title>

	<style type="text/css">
		body,html{
			height:100%;
			width:100%;
		}
		body {
			background: #603202;
		}

			.conteneur {
			background: #ffd085;
			width: 80%;
			height:100%;
			min-height: 100%;
			margin: auto;
			margin-top:0;
		}
		label {
			margin-left: 20px; 
			position : relative;
			display: block;
			width: 15em;
			height: 1.4em;
			margin-top:2%;
		}

		select {
			margin-left: 20px;
			position: relative;
			width: 6em;
		}
		
		.ok{color:green}
		.non{color:red}

	</style>

	</head>

	<body>
		<div id="" class="conteneur">
				<form>
				<label>
					costumes disponibles
					<select name="select" onchange="" class="costume">
						<option value="1" class="ok">paysan</option>
						<option value="2" class="non">noble</option>
						<option value="3" class="non">dame</option>
						<option value="4" class="ok">moine</option>
					</select>
				</label>
				<label for="nom">
					<input type="submit" class="submit" value="Envoyer" />
				</label>
				</form>
			</form>
		</div>

	</body>

</html>


Comme on peut le voir, le premier élément est un costume de paysan qui est disponible. Si on déroule la liste des costumes, on le voit bien en vert. Mais avant de la dérouler, il est en noir qui est la couleur par défaut.

Existe-t-il un moyen de changer cela ?

Et tant que j'y suis, quelqu'un pourait-il me dire pour quelle raison mon conteneur se décale vers le bas car il s'agit-là d'un problème que je rencontre fréquemment ?

Merci d'avance ! Smiley biggrin
Modifié par Shimrhod (28 Apr 2008 - 09:28)
Mmm, personne pour m'aider ?

J'ai l'impression qu'en mettant un javascript dans la balise select qui teste si le costume est disponible ou non, on pourrait afficher la bonne couleur. Mais je ne suis pas sûr de comment l'écrire. Smiley biggrin
Bonjour,

Shimrhod a écrit :
Existe-t-il un moyen de changer cela ?

Je n'en suis pas sûr. Et même l'utilisation des couleurs rouge et verte pose problème:
1. un problème d'accessibilité (on fait reposer l'information sur la couleur, or celle-ci n'est pas facilement visible par tous... notamment les daltoniens);
2. un problème de compatibilité (je ne suis pas sûr que tous les navigateurs dans toutes leurs versions affichent les couleurs rouge et verte de ta liste déroulante... je parierais même que Konqueror et Safari ne le font pas).

Solution possible: ne pas afficher comme choix possible (donc ne pas afficher dans la liste déroulante) les éléments qu'on ne veut pas que l'utilisateur puisse choisir. Donc n'afficher que les éléments disponibles.

Shimrhod a écrit :
Et tant que j'y suis, quelqu'un pourait-il me dire pour quelle raison mon conteneur se décale vers le bas car il s'agit-là d'un problème que je rencontre fréquemment ?

Au pif:
- marges et padding par défaut de body;
- fusion des marges (faire une recherche).
Sujet clos
Aller à