Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
663 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Couleur dans une liste déroulante

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Couleur dans une liste déroulante

n°1575656
rufo
Pas me confondre avec Lycos!
Posté le 15-06-2007 à 17:02:49  profilanswer
 

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 :
  1. .style1 {
  2.     background: #f00;
  3. }
  4. .style2 {
  5.     background: #0f0;
  6. }
  7. .style3 {
  8.     background: #00f;
  9. }


 
et dans mon code html, j'ai :

Code :
  1. <select id="liste" name="liste">
  2.     <option name="elt1" value="1" class="style1">Elément 1</option>
  3.     <option name="elt2" value="2" class="style2">Elément 2</option>
  4.     <option name="elt3" value="3" class="style3">Elément 3</option>
  5. </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:

mood
Publicité
Posté le 15-06-2007 à 17:02:49  profilanswer
 

n°1575753
Profil sup​primé
Posté le 16-06-2007 à 03:08:59  answer
 

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 ?

n°1575754
gatsu35
Blablaté par Harko
Posté le 16-06-2007 à 03:12:54  profilanswer
 

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

n°1576115
rufo
Pas me confondre avec Lycos!
Posté le 18-06-2007 à 10:28:10  profilanswer
 


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

n°1576130
rufo
Pas me confondre avec Lycos!
Posté le 18-06-2007 à 10:41:00  profilanswer
 

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

n°1576138
rufo
Pas me confondre avec Lycos!
Posté le 18-06-2007 à 10:47:57  profilanswer
 

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

n°1576164
rufo
Pas me confondre avec Lycos!
Posté le 18-06-2007 à 11:15:07  profilanswer
 

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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.        <meta name="keywords" content="ASTRES, intranet, support, helpdesk" />
  6.        <title>ASTRES v2.3 - Intranet IVD</title>
  7.        <style type="text/css">
  8.      .style1 {
  9.         background: #f00;
  10.      }
  11.      .style2 {
  12.         background: #0f0;
  13.      }
  14.      .style3 {
  15.         background: #00f;
  16.      }
  17.        </style>
  18. </head>
  19. <body>
  20. <form id="test" action="test.html" method="post">
  21.      <select id="liste" name="liste">
  22.         <option name="elt1" value="1" class="style1">Elément 1</option>
  23.         <option name="elt2" value="2" class="style2">Elément 2</option>
  24.         <option name="elt3" value="3" class="style3">Elément 3</option>
  25.      </select>
  26. </form>
  27. </body>
  28. </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:

n°1577358
rufo
Pas me confondre avec Lycos!
Posté le 20-06-2007 à 17:23:12  profilanswer
 

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

n°1585653
Gnarik
Posté le 12-07-2007 à 11:29:58  profilanswer
 

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
 
 
 

n°1585762
rufo
Pas me confondre avec Lycos!
Posté le 12-07-2007 à 13:44:48  profilanswer
 

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


Aller à :
Ajouter une réponse
  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'entierliste 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


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR