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

**Wookai** · 28/05/2006, 17h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Kerod** · 28/05/2006, 17h25

Ce serait probablement à faire en javascript...

Une récupération du selectedindex et traitement en fonction de celui ci

**Wookai** · 28/05/2006, 17h31

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

...

**Kerod** · 28/05/2006, 21h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Wookai** · 29/05/2006, 10h04

Hello !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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

CSS

Vue hybride

Discussions similaires

Partager

Partager