Comment changer la couleur d’arrière-plan de l’option de boîte de sélection?

J’ai une boîte de sélection et j’essaie de changer la couleur d’arrière-plan des options lorsque la zone de sélection a été cliquée et affiche toutes les options.

Voir violon

html

 Please choose Option 1 Option 2 Option 3 Option 4  

css

 select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); } 

Vous devez mettre la background-color sur la balise d’ option et non la balise select

 select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } 

Si vous voulez styler chacune des balises d’ option utilisez le sélecteur d’ atsortingbute css:

 select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } select option[value="1"] { /* value not val */ background: rgba(100, 100, 100, 0.3); } select option[value="2"] { /* value not val */ background: rgba(200, 200, 200, 0.3); } /* ... */ 

Je ne sais pas si vous l’avez considéré ou non, mais si votre application est basée sur la coloration de divers groupes d’éléments, vous devriez probablement utiliser la associée à une classe pour plus de références. Par exemple:

  

et puis dans la tête de votre document écrivez le css comme ceci:

  

Oui, vous pouvez définir ceci par la manière oppisite en utilisant ceci,

 option:not(:checked) { } 

vérifier cette démo jsFiddle

HTML

  

CSS

 select{ margin:40px; background: rgba(0,0,0,0.3); color:#FFF; text-shadow:0 1px 0 rgba(0,0,0,0.4); } option:not(:checked) { background-color: white; color:#000; } 

entrer la description de l'image ici

Semblable à certaines des réponses, mais pas vraiment énoncée, est d’append une classe à la balise option réelle et d’utiliser des classes css … cela fonctionne actuellement pour moi sans problème sur IE (voir ci-dessus ss).

  

CSS:

 .greenColor{ background-color: #33CC33; } .redColor{ background-color: #E60000; } 

Si vous voulez vraiment définir le style dans un, envisagez de passer à un menu déroulant basé sur Javascript / CSS tel que http://getbootstrap.com/2.3.2/components.html#dropdowns ou https://silviomoreto.github.io/ bootstrap-select / examples / . Cela parce que les navigateurs tels que IE ne permettent pas le style des options dans les éléments . Chrome / OSX a également ce problème – vous ne pouvez pas styler les options.

Cependant, un avertissement est attaché à cette approche. Ces types de menus fonctionnent très différemment sur les plates-formes mobiles car les éléments natifs ne sont pas utilisés. Ils peuvent également avoir des caprices sur le bureau. Mon conseil est 1) ne pas écrire le vôtre et 2) trouver une bibliothèque qui a été vraiment bien testée.

 $htmlIngressCss=''; 

Ajoutez $htmlIngressCss dans votre partie HTML 🙂

Changez simplement la couleur de bg

select { background: #6ac17a; color:#fff; }

Une autre option est d’utiliser Javascript:

 if (document.getElementById('selectID').value == '1') { document.getElementById('optionID').style.color = '#000'; 

(Pas aussi propre que le sélecteur d’atsortingbut CSS, mais plus puissant)

Mes sélections ne coloreront pas l’arrière-plan avant d’avoir ajouté! Important au style.

  input, select, select option{background-color:#FFE !important} 

Voilà ce que j’ai appris sur le sujet!

La spécification CSS 2 ne résout pas le problème de la présentation des éléments de formulaire à la période des utilisateurs!

Lire ici: magazine brisant

Finalement , vous ne trouverez jamais d’article technique de w3c ou autre adressé à ce sujet. Les éléments de forme stylisés, en particulier les boîtes de sélection, ne sont pas entièrement pris en charge, mais vous pouvez vous déplacer… avec un certain effort!

Style des éléments de formulaire HTML

Création de widgets personnalisés

Ne perdez pas de temps avec les hacks E tels lire les liens et apprendre comment les pros font le travail!