18041 sujets

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

[balise select] couleur option sélectionnée avec le CSS et javascript

Bonjour à tous.

J'ai découvert un vieux sujet qui semble résolu, mais lorsque je teste la solution, elle ne marche pas.

Voici le problème :

Dans une balise "Select", l'option qui est sélectionnée passe en bleu. Changer la couleur de fond est facile, mais je voudrais changer la couleur de l'option sur laquelle l'utilisateur passe la souris. Probablement à l'aide d'une combinaison de javascript et de CSS en utilisant l'évènement "onchange".

J'ai trouvé ce vieux sujet de 2006 :

http://forum.alsacreations.com/topic-1-20178-1-Selection-et-couleur-dynamique-resolu.html

Un certain Zeke donne une solution qui me semble très bien mais qui ne fonctionne pas lorsque je la teste. Du moins, je ne l'ai peut être pas bien adaptée. Je suis un débutant en javascript.


<!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>Document sans nom</title>
	<style type="text/css">

		.chaussure-ressource-nbr {
			width: 218px;
			height: 30px;
			text-align: left;
			color: #527307;
			padding: 0;
			color: #527307
			border: solid #94b521 1px;
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size:13px;
			color:#527307;
			padding-left: 0px;
			margin-bottom: 5px;
			float: left;
			background-color: #FFFFFF;
		}

		.chaussure-ressource-nbr select {
			float: right;
			margin-right: 5px;
			margin-top: -10px;
		}	
	</style>

	<script type="text/javascript">

		function selection(pSelect,pDiv){
			var couleur = "#fff";
			if(pSelect.options[pSelect.selectedIndex].value != ""){
				couleur = "#94b521";
			}

			document.getElementById(pDiv).style.backgroundColor = couleur;
		}
	</script>
</head>

<body>
<div id="monDiv" class="chaussure-ressource-nbr"> chaussure (s)

 	<select name="select" onchange="selection(this,'monDiv')">
		<option value=""></option>
	    	<option value="1"> 1</option>
    		<option value="2">2 </option>
  	</select>
</div>
</body>

</html>


Ce sujet a deux ans, mais je suis en train de buter sur le même problème. Je ne suis pas encore très expérimenté, surtout en programmation javascript. Je commence à comprendre un peu les CSS et je me débrouille un peu en PHP (qui me semble assez proche du JS).

Là, j'ai exactement le même problème que dans ce sujet, et lorsque je recopie le code de Zeke, qui pourtant me semble bon, l'option sélectionnée de la liste déroulante reste en "bleu" et non pas en vert.

Et cela, aussi bien dans IE que Firefox ou Opera.

Pourtant le code de Zeke me semble bon. J'en comprends la logique mais des détails m'échappent :

En particulier ce qu'il y a dans la fonction "selection" :

function selection(pSelect,pDiv)


Je suis habitué aux fonctions "anonymes" du type "function()"

Qu'est ce que l'on met dans cette parenthèse ? Ce sont des paramètres ? Des variables ? Autre chose ?

Et surtout, est ce que ce sont des éléments prédéfinis dans le javascript, pSelect et pDiv ? Ou bien des éléments qui ont été créés par Zeke ?

Même question pour cette ligne :

f(pSelect.options[pSelect.selectedIndex].value != ""){ ... ... }


"options" est il une "méthode" prédéfinie de "pSelect" ?

(Je ne suis pas un pro de l'informatique, j'ai eu qqs cours et je lis mais je maîtrise encore mal certaines notions surtout que je n'y ai plus touché depuis un an. Avant, je me débrouillais mieux. Smiley langue

Enfin, dernière question ? Qu'est-ce qui fait que le code de Zeke ne marche pas, même pour sa propre page ? Et cela alors que sur le fond, salogique semble impeccable ?

Est-ce qu'il faut adapter les noms de "pDiv" et "pSelect" ?

Merci d'avance. Smiley biggrin

PS :

Si qqn voit une autre solution, par exemple en CSS pur, je suis également intéressé. Je pense que le :hover ne fonctionne toujours que pour a:hover sous IE7 mais je peux me tromper.
Modifié par Shimrhod (10 Apr 2008 - 18:25)
Bonjour,

À vue de nez le script que tu utilises sert à modifier la couleur de fond du bloc div conteneur lorsque l'utilisateur a fait un choix avec la liste déroulante. Et pas à modifier la couleur de fond de l'élément de la liste déroulante qui a le focus.

On peut avoir un aperçu de ce que tu souhaiterais faire, pour que ce soit plus clair?

En attendant, un peu de lecture: Comment ne pas styler les éléments de formulaire ?. Smiley cligne
Bien sûr. Expliqué très simplement, ce que je souhaiterais, c'est tout simplement que dans une balise select avec plusieurs options, l'option sur laquelle je passe avec la souris, celle dont tu dis qu'elle a le focus n'aie plus la couleur bleue qu'elle a par défaut mais une choisie par moi.

Dans un select, il y a plusieurs options, et par défaut, celle sur laquelle on promène la souris ( celle sur laquelle il y a le focus) est en bleu. Je voudrais que ce soit en beige ou en ocre.

La couleur de fond, j'ai déjà trouvé comment la changer mais elle n'est pas liée au focus. Elle n'est pas changeante et ne me tracasse donc pas trop.

Celle qui me tracasse, c'est bien celle liée au focus de la souris. Smiley biggrin

PS : J'ai bien lu ton lien, merci.
Modifié par Shimrhod (14 Apr 2008 - 10:43)
Shimrhod a écrit :
Expliqué très simplement, ce que je souhaiterais, c'est tout simplement que dans une balise select avec plusieurs options, l'option sur laquelle je passe avec la souris, celle dont tu dis qu'elle a le focus n'aie plus la couleur bleue qu'elle a par défaut mais une choisie par moi.

Je ne pense pas que ça soit possible, du moins pas en CSS 2.1.
(Et le script JS que tu as utilisé ne sert pas à ça, sauf erreur de ma part.)

Shimrhod a écrit :
Dans un select, il y a plusieurs options, et par défaut, celle sur laquelle on promène la souris ( celle sur laquelle il y a le focus) est en bleu.

Ça, ça dépend du système d'exploitation, du navigateur, du thème visuel du système ou de celui du navigateur.
Chez moi c'est plutôt saumon pâle.
Modifié par Florent V. (14 Apr 2008 - 11:04)
D'accord. Le navigateur et le système d'exploitation. Mais bon, en tout cas, c'est bien cela que je désirerais changer. Smiley biggrin

Tu es sûr que ce n'est pas possible ? Smiley biggrin

(C'est plus ou moins ce que je pensais aussi au départ mais bon, en y repensant, si un thème le change bien, pourquoi pas un petit script finalement ? )
Shimrhod a écrit :
Tu es sûr que ce n'est pas possible ? Smiley biggrin

Non. C'est peut-être possible avec certains navigateurs et pour certains systèmes d'exploitation, que cela passe par des propriétés CSS propres au navigateur, peut-être des propriétés CSS 3, du Javascript, etc. Je doute par contre que ce soit possible d'obtenir quelque chose de correct avec tous les principaux navigateurs.

Donc si tu as l'après-midi devant toi, tu peux consulter les moteurs de recherche (en cherchant en anglais pour avoir accès à plus de sources), la spécification CSS 2.1 et les brouillons de CSS 3, le Mozilla Developer Center, le Microsoft Developer Network, la documentation développeur des navigateurs Opera et Safari, etc. Puis réaliser des tests systématiques (si tes premières recherches ne t'ont pas permis d'en trouver des déjà prêts) pour voir ce que ça donne. Smiley smile
Houlà ! Oui, je mesure mieux l'ampleur du travail et aussi ton degré de certitude.

Et bien je n'ai pas l'après midi malheureusement, mais je regarderai un peu si je peux.

En tout cas, grand merci pour ta réponse, c'est déjà quelque chose de savoir que ce n'est pas facilement accessible et je ne suis pas ironique.

En plus, idéalement, j'aurais du l'avoir au minimum pour Firefox et IE. Donc, grand merci. Si par hasard je tombe sur quelque chose, je posterai.
Pour ceux que cela intéresseraient dans l'avenir, j'ai trouvé un début de solution mais pas encore au point hélas.

Il existe une propriété CSS appelée "focus" qui permet de changer les caractéristiques d'un élément sur lequel on passe.

Néanmoins, primo, elle ne fonctionne que sous IE9, et secundo, il semble qu'elle ne marche pas pour les options du select, même sous un vrai navigateur.

La syntaxe css est

classeElement:focus{}

Voilà un essai que j'ai fait. Le focus marche bien pour les input mais pas pour les options. 

<!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 focus sur un select</title>

	<style type="text/css">
		body {
			background: #e2c7a8;
		}

			.conteneur {
			background: #755a44;
			width: 80%;
			height:100%;
			min-height: 100%;
			margin: auto;
		}

		label {
			margin-left: 20px; position : relative;
			display: block;
			width: 15em;
			height: 1.4em;
			position: relative;
			margin-top:2%;
		}

		input {
			position: absolute;
			left: 6em;
		}

		select {
			margin-left: 20px;
			position: relative;
			width: 6em;
		}
		input:focus{background: #ee986e;}
		option:focus{background: #ee986e;}
	</style>

	</head>

	<body>
		<div id="" class="conteneur">
			<form action="">
				<label for="prenom">
					Nom :
					<input type="text" class="prenom" value="prénom" />
				</label>
				<label for="nom">
					Nom :
					<input type="text" class="nom" value="nom" />
				</label>
				<label>
					nationalité
					<select name="select" onchange="selection(this,'monDiv')" class="nationalite">
						<option value="1">belge</option>
						<option value="2">français</option>
						<option value="3">algérien</option>
						<option value="4">espagnol</option>
					</select>
				</label>
				<label for="nom">
					<input type="submit" class="submit" value="Envoyer" />
				</label>
			</form>
		</div>

	</body>

</html>


Si vous faîtes un C/C de ce code et ouvrez la page avec Opera ou firefox, par exemple, vous verrez que cela marche très bien pour les input, même le submit, mais pas pour les options du select. Et en plaçant un focus directement sur le select, toutes les options sont sélectionnées.

Néanmoins, cela pourrait représenter un début de piste.
Modifié par Shimrhod (23 Apr 2008 - 18:47)
Sujet clos
Aller à