Couleur dans une liste déroulante

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Couleur dans une liste déroulante

rufo

Pas me confondre avec Lycos!

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:

Publicité

Profil supprimé

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

gatsu35

Blablaté par Harko

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

rufo

Pas me confondre avec Lycos!

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

rufo

Pas me confondre avec Lycos!

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...

rufo

Pas me confondre avec Lycos!

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

rufo

Pas me confondre avec Lycos!

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:

rufo

Pas me confondre avec Lycos!

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)...

Gnarik

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

rufo

Pas me confondre avec Lycos!

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

FORUM HardWare.fr

Programmation

HTML/CSS

Couleur dans une liste déroulante

Sujets relatifs
Access - Liste déroulantes Dépendantes ...	Comment intégrer des valeurs de liste dans ma clause WHERE ? :(
probleme de liste déroulante	[RESOLU]/[ACCESS]disparition de liste déroulantes sur formulaires
changer la couleur d'un texte dynamique	[VBA / ACCESS] Problème liste déroulante avec autre liste déroulante
[Algo]Combinaison d'une liste d'entier	liste simple avec 2 pointeurs sur le premier et le dernier elements
changer la couleur de texte d'une liste deroulante	[liste deroulante]annuler couleur bleue de l'element choisi
Plus de sujets relatifs à : Couleur dans une liste déroulante

Page générée en 0.054 secondes