Geckozone

Bonjour,

j'essaye de changer la couleur d'affichage des options dans une liste box.
Voici le code!:
<html>
<head>
<link type="text/css" rel="StyleSheet" href="sortabletable.css" />
<title>Consultation</title>
</head>
<body>
<select id="1005" name="1005" >
<option class="rouge" selected="selected" value="-1">A valider</option>

<option value="0">Non valide</option>
<option value="1">Valide</option>
<option value="-2">Inexploitable</option>
</select>

</form>
</body>
</html>

Ce que j'obtiens est assez étrange.. La valeur sélectionnée n'apparait pas de la couleur souhaitée. Par contre si je clique sur la flèche afin de voir l'ensemble des valeurs de ma liste, la couleur est correcte (a valider a une couleur différente)

En fait la seule manière que j'ai de changer la couleur pour la valeur sélectionné lorsque la liste n'est pas développé est de mettre la class au niveau du select.

Cependant tout marche très bien avec IE.

Est-ce que quelqu'un a une solution.....?

Merci beaucoup de votre aide

je pense que c'est parce que quand on ne développe pas la liste déroulante, le texte affiché (l'option sélectionnée) obéit aux règles css s'appliquant au select et non celles spécifiques à l'élément option correspondant au texte affiché.

Je ne peux pas confirmer à 100% que c'est le comportement correct, mais personnellement, ça me semble bon.

bon finalement j'ai trouvé une solution de contournement:
Je met une couleur au niveau du select. Maintenant j'aimerai pouvoir faire changer cette couleur après une sélection de l'utilisateur.

function changeCouleur(nom){

var selectElement = document.getElementById(nom);

var selectedIndex = selectElement.selectedIndex;

var optionChoisie = selectElement.options[selectedIndex].value;

selectElement.style.color = aValider;

}

Ce code marche parfaitement si j'écris la dernière ligne de la manière suivante:
selectElement.style.color = #cc66cc;

Ce que je souhaiterais c'est remplacer la couleur en 'dur' par une référence vers ma couleur 'aValider' que j'ai au préalable définit dans un CSS.

Merci encore de votre aide.

Lydie

re bonjour!!!

et bien finalement j'ai trouvé la solution

alors je vous la donne

il fallait mettre:
selectElement.className = "aValider";

avec aValider le nom de la classe définit dans le CSS.

Bon voici une autre version

meilleure que la première car plus simple:

<html>
<head>
<link type="text/css" rel="StyleSheet" href="sortabletable.css" />
<title>Consultation</title>
<script language="javascript">

function changeCouleur(selectElement, selectIndex){
selectElement.className = selectElement.options[selectIndex].className;

}

</script>
</head>
<body>

<select id="1005" name="1005"
onChange="javascript:changeCouleur(this,selectedIndex);"
>
<option class="aValider" selected="selected" value="-1">A valider</option>

<option class="nonValide" value="0">Non valide</option>
<option class="valide" value="1">Valide</option>
</select>

</form>
</body>
</html>

Geckozone

option class ne fonctionne pas sous Firefox mais sous IE oui

option class ne fonctionne pas sous Firefox mais sous IE oui

Résolu! et voici la solution

Une autre solution plus simple