Couleur dans une liste déroulante

Marsh Posté le 15-06-2007 à 17:02:49

Je ne sais pas si c'est parce que je suis un boulet où si c'est parce que j'ai un truc qui merdouille dans ma feuille de styles, mais comment ça se fait que l'élément sélectionné perd le style que je lui applique.
Je m'explique. J'ai, dans une liste, 3 éléments avec un style pour chacun :

Code :

.style1 {
background: #f00;
}
.style2 {
background: #0f0;
}
.style3 {
background: #00f;
}

et dans mon code html, j'ai :

Code :

<select id="liste" name="liste">
<option name="elt1" value="1" class="style1">Elément 1</option>
<option name="elt2" value="2" class="style2">Elément 2</option>
<option name="elt3" value="3" class="style3">Elément 3</option>
</select>

Autant, quand j'affiche la liste déroulante, je vois bien les bons styles (sauf pour l'élément sélectionné, mais ça c'est normal) autant, une fois que j'ai cliqué pour sélectionné un item, la liste déroulante se rétracte et l'élément sélectionné ne s'affiche pas avec le bon style.

Est-ce-que c'est normal?
En gros, quand ma liste déroulante n'a pas le focus et que l'élément sélectionén dedans est le premier, je voudrais que la couleur de fond soit bien rouge comme défini dans ma feuilel de styles.

Si qq'un peut m'aider, merci par avance :jap:

Reply

Marsh Posté le 15-06-2007 à 17:02:49

Reply

Marsh Posté le 16-06-2007 à 03:08:59

Désolé, j'ai pas capté Quand tu déroules ta liste, tout va bien. Et quand tu sélectionne un élément, le rouge par exemple, tu veux que ça reste rouge une fois que la liste se referme, et là ce n'est pas le cas ?

Message cité 1 fois

Reply

Marsh Posté le 16-06-2007 à 03:12:54

Ah mais les listes déroulantes c'est le démon et ca marche jamais parfaitement

Reply

Marsh Posté le 18-06-2007 à 10:28:10

c'est bien ça, t'as compris.

Reply

Marsh Posté le 18-06-2007 à 10:41:00

après tests, bizarrement, ça marche dans IE 5.0 mais pas dans Firefox 1.0.

Malheureusement, je peux pas tester sous IE6 et Firefox 2.0 directement, faut que je fasse une page test...

Reply

Marsh Posté le 18-06-2007 à 10:47:57

Bon après tests, ça marche aussi dans IE 6.0 mais pas dans Firefox 2.0

Reply

Marsh Posté le 18-06-2007 à 11:15:07

Voici le code "complet" de la page de tests :

Code :

<!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" lang="fr"> 
<head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <meta name="keywords" content="ASTRES, intranet, support, helpdesk" /> 
        <title>ASTRES v2.3 - Intranet IVD</title> 
        <style type="text/css"> 
      .style1 { 
         background: #f00; 
      } 
 
      .style2 { 
         background: #0f0; 
      } 
 
      .style3 { 
         background: #00f; 
      } 
        </style> 
</head> 
<body> 
<form id="test" action="test.html" method="post"> 
      <select id="liste" name="liste"> 
         <option name="elt1" value="1" class="style1">Elément 1</option> 
         <option name="elt2" value="2" class="style2">Elément 2</option> 
         <option name="elt3" value="3" class="style3">Elément 3</option> 
      </select> 
</form> 
</body> 
</html>

Après qq recherches sur google, j'ai trouvé ça :
http://www.456bereastreet.com/lab/ [...] ct-single/

si on style le <select>, y'a pas de soucis, on peut modifier le background... Mais ça ne marche plus au niveau d'un style pour chaque <option> Et apparemment, y'a pas de solution simple. Faut passer par du JS où on remplace le <select> par un <ul>! En gros, faut émuler un <select> avec un <ul>... :pt1cable:

Reply

Marsh Posté le 20-06-2007 à 17:23:12

dans le même genre, est-ce possible de mettre une image dans une <option>? Bon, j'ai testé et j'ai pas réussi (tant en utilisant <img> dans <option> qu'en mettant l'image dans le background de l'option)...

Reply

Marsh Posté le 12-07-2007 à 11:29:58

Bonjour a tous.

Je code une interface dans le cadre d'un petit projet d'entreprise et j'ai eu exactement le meme probleme que vous:
Sous IE ma balise <select> prenait bien la couleur de la balise<option> selectionnée mais sous firefox ce n'était pas le cas.

J'ai résolu le problème, je vous soumets ma solution:
J'ai créé différentes class que j'attibue au différente option de mon select
.o-1{ background-color:#FFFFFF;
}
.o0{ background-color:#8686FB;
}
.o1{ background-color:#FD5B5B;
}
.o2{ background-color:#7BFB85;
}
.o3{ background-color:#00FF00;
}
.o4{ background-color:#C0C0C0;
}
Ensuite j'ai créé une fonction javascript attribuant la bonne class au composant select:
function setColor(indice){

var sii = "document.forms[0].cmb"+indice+".selectedIndex";
sii = eval(sii);
eval("document.forms[0].cmb"+indice+".className='o"+(sii-1)+"'" );

}

J'ai ensuite placer le lancement de cette fonction sur l'attribut onChange de ma balise <select>:
echo "<select name='cmb".$temp->lotsId."' onChange=\"setColor(".$temp->lotsId." );\">";

Ma solution se base sur le fait que IE attribue la class de l'option selectionnée au select alors que firefox non.

En espérant que mon explication est assez clair. Bonne continuation a tous.

Gnarik

Reply

Marsh Posté le 12-07-2007 à 13:44:48

tout à fait claire. Merci, j'essaierai ça. :jap:

Reply

Couleur dans une liste déroulante

Sujets relatifs:

Leave a Replay