[CSS] modifier la couleur d'un select

marianne31, le lundi 20 décembre 2004 à 16:38:07

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

Répondre à marianne31 Signaler ce message aux modérateurs Aller au dernier message

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

kilian, le lundi 20 décembre 2004 à 16:53:29

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

Répondre à kilian

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

picard.1997.mode, le samedi 17 mai 2008 à 14:01:56

tu sais bien repondre au gens!

Répondre à picard.1997.mode

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

marianne31, le lundi 20 décembre 2004 à 17:16:38

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.

Répondre à marianne31

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

kilian, le lundi 20 décembre 2004 à 18:19:27

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

Répondre à kilian

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

marianne31, le mardi 21 décembre 2004 à 08:48:25

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

Répondre à marianne31

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

kilian, le mardi 21 décembre 2004 à 14:49:34

Argh, désolé alors, je vois pas du tout :-(

var a=unescape("%3A-%29");
document.write(a);

Répondre à kilian

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

lav_prog, le lundi 24 mars 2008 à 11:17:52

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

Répondre à lav_prog

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

PhP, le samedi 17 mai 2008 à 15:26:33

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
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

Répondre à PhP

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Blackmatrix, le dimanche 24 août 2008 à 15:12:29

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>

Répondre à Blackmatrix

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Ishantiberia, le jeudi 28 août 2008 à 15:02:42

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

Répondre à Ishantiberia

Posez votre question Répondre