[CSS] modifier la couleur d'un select
marianne31 -  
Bonjour,

Je suis désolée de poster une deuxième fois ce message mais j'avais mis l'autre dans Internet mais il a été noyé dans les message "MSN", donc je retente ici.

Voila je souhaiterais modifier la couleur de la barre de défilement d'un select ( liste déroulante).
On m'a dit que c'était impossible, qu'il fallait utiliser du Javascript, est ce quelqu'un en saurait un peu plus ?

Merci par avance de vos réponses

Maya

8 réponses

  1. Ishantiberia
    Une idée qui vient très tard... Mais ayant mit du temps à trouver...

    J'ai pu modifier les contours du select avec le css suivant :

    input.Champ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    background-color: #ffcc99;
    }

    Puis la couleur du select directement dans la balise :
    <select style="width:211px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; text-transform: uppercase; background-color: #ffcc99" name="Service">
    1. Blackmatrix
      On peut aisement modifier directement la couleur dans le STYLE du select comme suit

      <select name="ListeSport" size="1" style="background-color:green;">
      <option value="Football">Football</option>
      <option value="Boxe">Boxe</option>
      <option value="Athlétisme">Athlétisme</option>
      <option value="Natation">Natation</option>
      </select>
      2. marianne31 Auteur
        Merci

        j'avais déjà essayer, en fait ça a l'air valable pour le body et les textarea mais pas pour les select, en tout cas chez moi ça marche pas.
        2. kilian Modérateur
          Ok. Je viens de trouver cette discussion:
          http://allhtml.com/forum/index.php?t=l&f=1&i=435400

          Sur le troisième post, quelqu'un montre comment modifier le style pour la balise select: 
          select   {.......}


          Regarde a priori ça devrait marcher, tu trouveras pleins de caractéristiques pour la couleur de la barre de défilement :-) 

          var a=unescape("%3A-%29");
document.write(a);
          1.  marianne31 Auteur
            j'avais déjà vu cette discussion, et j'ai essayé mais ça ne marche pas. D'ailleurs, j'y avais posté un message mais on ne m'y a pas répondu.

            Merci quand même pour ton aide.

            Marianne
            1. kilian Modérateur
              Argh, désolé alors, je vois pas du tout :-( 

              var a=unescape("%3A-%29");
document.write(a);
          2. lav_prog
            bjr a tous
            svp je souhaite changer la couleur du text affiché dans un textarea et son format plus changer la couleur du scrollbar dun textarea plz aidez moi plllz
            1. PhP
              Bjr

              On peut assez facilement modifier la couleur d'une liste avec CSS

              Ex 

              <html>
<head>
<style>
/* En utilisant l'id  : la liste sera rouge */
select#maliste
{
	width : 100px;
	background: #FF0000;
	color: #FFFFFF;
}

/* En utilisant la classe  : la liste sera bleue */
select.maliste
{
	width : 100px;
	background: #0000FF;
	color: #FFFFFF;
}

optgroup.groupeA
{
	color : #FF0000;
}

optgroup.groupeB
{
	color : #00FF00;
}

.opt1
{
	color : #FF0000;
}

.opt2
{
	color : #00FF00;
}

.opt3
{
	color : #0000FF;
}
</style>
<head>
<body>
<form>
<p>Ceci est une liste rouge</p>
<select id="maliste">
<option value="option1">Choix 1</option>
<option value="option2">Choix 2</option>
<option value="option3">Choix 3</option>
<option value="option4">Choix 4</option>
</select>
<p>Ceci est une liste bleue</p>
<select class="maliste">
<option value="option1">Choix 1</option>
<option value="option2">Choix 2</option>
<option value="option3">Choix 3</option>
<option value="option4" class="OPT">Choix 4</option>
</select>
<p>Ceci est une liste muticolore</p>
<select>
<option value="option1" class="opt1">Choix 1</option>
<option value="option2" class="opt2">Choix 2</option>
<option value="option3" class="opt3">Choix 3</option>
</select>

<p>Toujours plus loin avec les listes</p>
<select class="maliste">
<optgroup label="Groupe A" class="groupeA">
	<option value="option1">Choix 1</option>
	<option value="option2">Choix 2</option>
	<option value="option3">Choix 3</option>
	<option value="option4">Choix 4</option>
</optgroup>
<optgroup label="Groupe B" class="groupeB">
	<option value="option1">Choix 1</option>
	<option value="option2">Choix 2</option>
	<option value="option3">Choix 3</option>
	<option value="option4">Choix 4</option>
</optgroup>
</select>

</body>
</html>


              Notez que comme d'hab le rendu n'est pas exactement le même entre FF et IE

              Discussions similaires

              Modifier une annonce ou le prix sur Leboncoin sans payer
              BourrinOman83

              22 réponses
              Changer la couleur de fond d'un en-tête
              Adamantine

              5 réponses
              Retrouver réglages couleurs d'origine de mon écran W10
              LoulouSophie

              8 réponses