[CSS] modifier la couleur d'un select

marianne31 Messages postés 68 Statut Membre -  
 Ishantiberia -
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">
    4
  2. 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>
    1
  3. kilian Messages postés 8675 Date d'inscription   Statut Modérateur Dernière intervention   1 526
     
    Salut,

    Par là => http://www.ksurf.net/~bermania/web/css/csspro_scrollbars.html
    J'espère que ça marchera aussi pour un select...
    Mais c'est possible une barre de défilement dans un select?
    Ce n'est pas plutôt entre des balises <option> qu'on peut faire ça? 

    var a=unescape("%3A-%29");
document.write(a);
    0
    1. picard.1997.mode Messages postés 11 Statut Membre
       
      tu sais bien repondre au gens!
      -1
  4. marianne31 Messages postés 68 Statut Membre 4
     
    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.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. kilian Messages postés 8675 Date d'inscription   Statut Modérateur Dernière intervention   1 526
     
    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);
    0
  7. marianne31 Messages postés 68 Statut Membre 4
     
    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
    1. kilian Messages postés 8675 Date d'inscription   Statut Modérateur Dernière intervention   1 526
       
      Argh, désolé alors, je vois pas du tout :-( 

      var a=unescape("%3A-%29");
document.write(a);
      -1
  8. 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
    0
  9. PhP Messages postés 1774 Statut Membre 606
     
    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
    0

Discussions similaires

Modifier une annonce ou le prix sur Leboncoin sans payer
BourrinOman83 -
Clarckos -

22 réponses
Retrouver réglages couleurs d'origine de mon écran W10
LoulouSophie -
pistouri -

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

5 réponses