[CSS] modifier la couleur d'un select

marianne31 69Messages postés 2 mai 2003Date d'inscription - Dernière réponse le 28 août 2008 à 15:02

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

[CSS] modifier la couleur d'un select »

Suggestions

[CSS] modifier la couleur d'un select
CSS - Les couleurs » Articles
[CSS] Modifier couleur scrollbar (Résolu) » Forum
Comment personnaliser sa page facebook (Résolu) » Forum
Windows 7 - Changer la couleur de la barre des taches » Fiches pratiques
Colorer mes yeux avec photofiltre (Résolu) » Forum

Plus

Réponse

Ishantiberia 28 août 2008 à 15:02

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

Ajouter un commentaire

Réponse

kilian 8802Messages postés 19 septembre 2003Date d'inscription 2 juillet 2011Dernière intervention 20 déc. 2004 à 16:53

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

Ajouter un commentaire - Site web

picard.1997.mode- 17 mai 2008 à 14:01

tu sais bien repondre au gens!

Réponse

marianne31 69Messages postés 2 mai 2003Date d'inscription 20 déc. 2004 à 17:16

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.

Ajouter un commentaire

Réponse

kilian 8802Messages postés 19 septembre 2003Date d'inscription 2 juillet 2011Dernière intervention 20 déc. 2004 à 18:19

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

Ajouter un commentaire - Site web

Réponse

marianne31 69Messages postés 2 mai 2003Date d'inscription 21 déc. 2004 à 08:48

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

Ajouter un commentaire

kilian- 21 déc. 2004 à 14:49

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

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

Réponse

lav_prog 24 mars 2008 à 11:17

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

Ajouter un commentaire

Réponse

PhP 1757Messages postés 11 décembre 2000Date d'inscription 17 mai 2008 à 15:26

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

Ajouter un commentaire

Réponse

Blackmatrix 24 août 2008 à 15:12

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>

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

iPad : les meilleures applications pour le travail

iPad : les meilleures applications pour le travail

Voici une petite sélection d'applications pour ceux qui souhaitent adapter l'iPad à leurs besoins professionnels.

[CSS] modifier la couleur d'un select

[CSS] modifier la couleur d'un select »

iPad : les meilleures applications pour le travail