[CSS] Style d'un <option> pas affiché partout

Version imprimable

Salut à tous !

Je sais, mon titre n'est pas très explicite, mais je ne savais pas vraiment comment décrire mon problème ;). Comme un exemple vaut mieux qu'un long discours, voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title>JS test</title> </head> <body> <select> <option>valeur 1</option> <option style='color: rgb(100, 200, 100);'>valeur 2</option> </select> </body> </html>
Avec ce code, lorsqu'on déroule les options du select, la valeur 2 est bien verte. Cependant, si on sélectionne la valeur 2, et que le select "se replie", alors valeur 2 sera à nouveau affiché en noir (en fait, il sera affiché selon le style du select).

Y a-t-il un moyen pour que le style du option "surcharge" celui du select ?

Merci d'avance pour vos réponses, et n'hésitez pas à me demander des précisions le cas échéant !

28/05/2006, 17h25
Kerod

Ce serait probablement à faire en javascript...

Une récupération du selectedindex et traitement en fonction de celui ci :roll:
28/05/2006, 17h31
Wookai

J'y avais pensé, le problème c'est que je veux que même si la valeur verte est sélectionnée, les autre gardent la couleur noire...

Donc si je définis le style du select en fonction du de la valeur sélectionnée, je dois donner un style à chaque option...

Bah... C'est ce que je vais devoir faire au final, à voir :roll:...

Bon j'ai fait un petit test :
voici le code du select
Code:

1 2 3 4 5 6 <select name="sel" id="choix" onChange="colorize(this.id)"> <option value="-1"></option> <option style="color:#FF0000" value="1">1</option> <option style="color:green" value="2">2</option> <option style="color:black" value="3">3</option> </select>
la fonction js :
Code:

1 2 3 4 5 function colorize(id) { document.getElementById(id).style.color = document.getElementById(id).options[document. getElementById(id).selectedIndex].style.color; }
j'ai pas mis de css car si tu le fais sans spécifier la couleur de l'option c'est toutes les options qui prennent la couleur :roll:

29/05/2006, 10h04
Wookai
Hello !

C'est ce que j'ai fait, en gros... J'ai défini une couleur par défaut à tous les option :
Code:

1 2 3 option { color: rgb(0, 0, 0); }
et j'affecte le style de l'option sélectionné au select, comme tu l'as fait avec ta fonction colorize(id).

Merci !