Style CSS dans liste déroulantes

Sujet résolu

21 février 2010 à 17:17:31

Bonjour tout le monde,

j'ai crée une liste déroulante avec le code suivant:

<h3>Liste déroulante</h3>
   <p>
   <select name="choix">
   
		<option value="choix0" id="choix0" selected="selected"></option>
		<option value="choix1" id="choix1">France</option>
		<option value="choix2" id="choix2">Italie</option>
		<option value="choix3" id="choix3">Espagne</option>
		<option value="choix4" id="choix4">Amerique</option>
   </select>
   </p>

Avec la feuille de style ci-dessous:

#choix0
{

background-color: white;

}




#choix1
{

background-color: red;

}


#choix2
{

background-color: yellow;

}


#choix3
{

background-color: green;

}


#choix4
{

background-color: purple;

}

La liste deroulante a donc un fond blanc au depart et aucune option selectionnée.

J'aimerais que si je choisi l'option 1, qui a un fond rouge dans ma liste, une fois que cette option a été choisie, et que ma liste se referme, l'option choisie apparaisse avec la couleur de fond de l'option choisie.

Seuleument je n'arrive pas a comprendre comment faire, dois-je uniquement jouer avec les feuille de style ou faut-il passer par le PHP ?

Merci

delphiki

21 février 2010 à 17:19:47

Il faut que tu passes par du Javascript.

Je déplace ton sujet dans le bon forum.

Dal'Yth

21 février 2010 à 17:46:57

Salut,

déjà, ajoute un id à ton select. Ensuite, il te faut du javascript :

<h3>Liste déroulante</h3>
   <p>
   <select name="choix" id="select">
   
		<option value="choix0" id="choix0" selected="selected"></option>
		<option value="choix1" id="choix1" onclick="colorer(1)">France</option>
		<option value="choix2" id="choix2" onclick="colorer(2)">Italie</option>
		<option value="choix3" id="choix3" onclick="colorer(3)">Espagne</option>
		<option value="choix4" id="choix4" onclick="colorer(4)">Amerique</option>
   </select>
   </p>

Et tu ajoute dans le <head> :

<script>
function colorer(id) {
	document.getElementById("select").style.backgroundColor = document.getElementById("choix"+id).style.backgroundColor;
	
}
</script>

cuda71

21 février 2010 à 18:03:18

Bonjour Dal'Yth,

j'ai fait comme tu m'as dit mais ça ne marche pas.

Dois je changer quelque chose dans le code Javascript ???

Dal'Yth

21 février 2010 à 18:06:00

C'est moins flexible mais ça devrait fonctionner :

<h3>Liste déroulante</h3>
   <p>
   <select name="choix" id="select">
   
		<option value="choix0" id="choix0" selected="selected"></option>
		<option value="choix1" id="choix1" onclick="colorer('red')">France</option>
		<option value="choix2" id="choix2" onclick="colorer('yellow')">Italie</option>
		<option value="choix3" id="choix3" onclick="colorer('green')">Espagne</option>
		<option value="choix4" id="choix4" onclick="colorer('purple')">Amerique</option>
   </select>
   </p>

Et le javascript :

<script>
function colorer(couleur) {
	document.getElementById("select").style.backgroundColor = couleur;
	
}
</script>

PS : si quelqu'un sait pourquoi le premier code n'a pas fonctionné...

cuda71

21 février 2010 à 18:21:28

Bonjour Dal'Yth,

en fait le second code ne fonctionne pas non plus

Dal'Yth

21 février 2010 à 18:44:04

Chez moi il fonctionne parfaitement, donc le problème doit venir de l'endroit où tu as mis le JS ou d'une autre erreur (syntaxe, ...).
Tu peux donner tout le code de la page ?

cuda71

21 février 2010 à 18:56:03

Rebonsoir,

voici le code complet de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Envoi de paramètres dans l'URL</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
	   
	   <script>
function colorer(couleur) {
	document.getElementById("select").style.backgroundColor = couleur;
	
}
</script>


   </head>
   <body>
   
   
    <h3>Zone de texte monoligne</h3>
   
   <p>
   Cette page ne contient que du XHTML <br />
   Veuillez taper votre prénom éééééééééééééàààààààààà 
   
   <form action="cible.php" method="post">
		<p>
		<input type="text" name="prenom" value="Entrez votre prénom">
		</p>
		
		<p>
		<input type="submit" name="valider" value="ENVOYER">
		</p>
		
   </form>
   
   </p>

   <br />
   <h3>Zone de texte multiligne</h3>
   <p>
   <textarea name"message" rows="8" cols="45">
   Votre message ici
   </textarea>
   </p>
   
   <br />
   
   <h3>Liste déroulante</h3>
   <p>
   <select name="choix" id="select">
   
		<option value="choix0" id="choix0" selected="selected"></option>
		<option value="choix1" id="choix1">France</option>
		<option value="choix2" id="choix2">Italie</option>
		<option value="choix3" id="choix3">Espagne</option>
		<option value="choix4" id="choix4">Amerique</option>
   </select>
   </p>
   
   
   <br />
   
   <h3>Cases à cocher</h3>
   <p>
   <input type="checkbox" name="xhtml" id="xhtml" /> <label for="xhtml" class="labelstyle">XHTML</label><br />
   <input type="checkbox" name="css" id="css" /> <label for="css" class="labelstyle">CSS</label><br />
   <input type="checkbox" name="php" id="php" checked="checked" /> <label for="php" class="labelstyle">PHP</label><br />
   <input type="checkbox" name="javascript" id="javascript" /> <label for="javascript" class="labelstyle">Javascript</label>
   </p>
   
   
   
   
   
   <h3>Liste déroulante</h3>
   <p>
   <select name="choix" id="select">
   
		<option value="choix0" id="choix0" selected="selected"></option>
		<option value="choix1" id="choix1" onclick="colorer('red')">France</option>
		<option value="choix2" id="choix2" onclick="colorer('yellow')">Italie</option>
		<option value="choix3" id="choix3" onclick="colorer('green')">Espagne</option>
		<option value="choix4" id="choix4" onclick="colorer('purple')">Amerique</option>
   </select>
   </p>

   
   
   
   
   
   
 
   
   </body>
</html>

Dal'Yth

21 février 2010 à 19:03:15

Attention, les deux listes déroulantes ont le même id.
C'est pour ça que quand on clique sur une option de la deuxième liste, ça colore la première.

Tu dois changer l'id de la première liste.

wapper

21 février 2010 à 19:17:00

Voici un code simple et fonctionnel:

<html>

	<head>

	</head>

	<body>

		<h3>Liste déroulante</h3>

		<p>

			<select name="choix" id="select" onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;">
   
				<option value="choix0" style="background-color:white" id="choix0" selected="selected"></option>

				<option value="choix1" style="background-color:red" id="choix1">France</option>

				<option value="choix2" style="background-color:yellow" id="choix2">Italie</option>

				<option value="choix3" style="background-color:green" id="choix3">Espagne</option>

				<option value="choix4" style="background-color:purple" id="choix4">Amerique</option>

 			</select>

		</p>

	</body>

</html>

Onclick n'est pas pris en charge par IE sur les <option></option>.

Pour récupérer la couleur avec javascript, il faut la mettre dans l'attribut style de l'option.

cuda71

21 février 2010 à 19:31:05

Citation : Dal'Yth

Attention, les deux listes déroulantes ont le même id.
C'est pour ça que quand on clique sur une option de la deuxième liste, ça colore la première.

Tu dois changer l'id de la première liste.

Bonsoir ah oui exact j'avais pas fait gaffe :euh:

----------------

Réf wapper:

Bonsoir wapper ton code fonctionne tout comme celui de Dal'Yth maintenant.

Mar contre sur les 2 codes, si je reselectionne dans la liste déroulante l'entrée vide avec le fond blanc, ça ne me mets pas une couleur de fond blanche une fois l'option selectionnée et la liste refermée, mais ça me mets la couleur de fond de la derniere option que j'ai selectiponné.

Est-ce que il est possible de corriger ça et faire en sorte que si je selectionne l'entrée vide avec le fond blanc, ça me remette le fond blanc ? o_O

wapper

21 février 2010 à 19:41:26

Désolé, distrait...

<html>

	<head>

		<style type="text/css">

			#choix0{

				background-color: white;

			}

			#choix1{

				background-color: red;

			}


			#choix2{

				background-color: yellow;

			}

			#choix3{

				background-color: green;

			}

			#choix4{

				background-color: purple;

			}

		</style>

	</head>

	<body>

		<h3>Liste déroulante</h3>

		<p>

			<select name="choix" id="select" style="background-color:white" onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;">
   
				<option value="choix0" style="background-color:white" id="choix0" selected="selected">Choisissez</option>

				<option value="choix1" style="background-color:red" id="choix1">France</option>

				<option value="choix2" style="background-color:yellow" id="choix2">Italie</option>

				<option value="choix3" style="background-color:green" id="choix3">Espagne</option>

				<option value="choix4" style="background-color:purple" id="choix4">Amerique</option>

 			</select>

		</p>

	</body>

</html>

cuda71

22 février 2010 à 1:39:07

Bonsoir wapper,

ça marche imeccable c'est tout a fait ce que je voulais faire !!

Merci beacoup a toi et aux autres aussi.

Internet explorer et Opera, une fois l'option choisie et la liste refermée gardent l'option selectionée en bleu, dommage, ça empeche de voir la couleur de fond, sans deselectionner la liste.

Mais je suppose, que c'est un "souci" impossible a regler non ?

Tillertan

22 février 2010 à 11:52:05

Normalement ouais c'est impossible a régler sauf si tu fais complètement disparaitre le select et que tu remplaces par un bidouillage html

Mets le sujet en résolu stp

cuda71

22 février 2010 à 12:25:46

BoNjour,

merci de votre aide