Prob : image de fond pour les "option" d'une liste -> te

Bonjour !

Deux petits problèmes me poussent à poster ici.
Objectif : Je souhaite mettre une image comme fond dans une liste de choix de type select + plein d'options.

J'ai donc ceci dans mon html :

<select name="niveau" size="1">
<option>Primaire</option>
<option>Secondaire</option>
<option>6ème - 5ème</option>
<option>4ème - 3ème</option>
<option>Lycée</option>
</select>

et ceci dans mon css :

option {
background-image:url("./img/bouton.png");
color:#555500;
padding:5px;
}

(mais le problème est identique si je donne ces caractéristiques à la balise select)

Sauf que visuellement ça ne donne pas grand chose. Sans parler des différences d'un navigateur à l'autre.

1/ je n'ai pas l'image comme fond à la première option de la liste, disons plutôt à l'option qui apparait comme sélectionnée par défaut. Par contre, quand je clique pour ouvrir la liste, en effet j'ai bien l'image pour chacune des option. C'est plutôt marrant, c'est pas du tout ce que je voulais, mais bon pourquoi pas, c'est pas vilain. Au cas où, vous sauriez comment faire pour que la première option de la liste ait elle aussi l'image en fond ?

2/ quand je passe le curseur sur l'une des options, le texte apparait en blanc, or mon image n'est pas très foncée donc c'est illisible. Quand il n'y a pas d'image de fond, le curseur surligne l'option en bleu foncé et le texte apparait en blanc, c'est logique. Mais comment faire pour que ça ne fasse pas cela quand je mets une image claire comme fond ?

Je vous remercie par avance (et vous prie de m'excuser si mes questions sont stupides, je ne suis pas vraiment une pro du css).

Bonjour !

Je vois que mon problème ne déchaîne pas les passions.
Comme je ne comprends pas pourquoi personne ne répond, pouvez-vous me dire s'il manque des explications ? ou bien le sujet a déjà été traité cent fois (mais j'ai fait une recherche, promis) ? ou alors vous ne savez pas comment le résoudre ?

Je vous remercie par avance et vous souhaite une bonne journée !

Nanouk.

Salut Nanouk,

a écrit :

1/ je n'ai pas l'image comme fond à la première option de la liste, disons plutôt à l'option qui apparait comme sélectionnée par défaut. Par contre, quand je clique pour ouvrir la liste, en effet j'ai bien l'image pour chacune des option...

Ceci est tout à fait normal car c'est le comportement par défaut des listes. C'est-à-dire que l'élement qui est séléctionné est toujours noir sur fond blanc. Si tu veux appliquer un style à l'élement sélectionné tu doit passer par la classe select { ... }. J'ai testé avec l'option background-color et cela fonctionne. Je pense que ca doit également marché avec des images. Et tu peux également appliquer une images différentes à chaque option si tu le souhaite.

Aucune idée pour la deuxième question, désolé

Tu trouveras à cette adresse plusieurs liens qui traite de la mise en forme des balises select. FAQ

j'éspère t'avoir aidé.