[CSS] modifier la couleur d'un select

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

+2

D'ailleurs, cette même liste bug quand on(je) est(suis) (entre autre) sur le forum ~~contributeur~~ raté des CCMistes
Une belette, un lapin !?
C

Répondre à kilian

7

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

Tu sais bien repondre au gens!

Répondre à picard.1997.mode

2

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

+1

D'ailleurs, cette même liste bug quand on(je) est(suis) (entre autre) sur le forum ~~contributeur~~ raté des CCMistes
Une belette, un lapin !?
C

Répondre à marianne31

3

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

+1

D'ailleurs, cette même liste bug quand on(je) est(suis) (entre autre) sur le forum ~~contributeur~~ raté des CCMistes
Une belette, un lapin !?
C

Répondre à kilian

4

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

D'ailleurs, cette même liste bug quand on(je) est(suis) (entre autre) sur le forum ~~contributeur~~ raté des CCMistes
Une belette, un lapin !?
C

Répondre à marianne31

5

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

D'ailleurs, cette même liste bug quand on(je) est(suis) (entre autre) sur le forum ~~contributeur~~ raté des CCMistes
Une belette, un lapin !?
C

Répondre à kilian

6

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

8

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

+1

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

9

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

10

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

+1

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