Modifier la couleur d'arrière-plan des options de la boîte de sélection

Question

J'ai une boîte de sélection et j'essaie de changer la couleur de fond des options lorsque la boîte de sélection a été cliquée et qu'elle affiche toutes les options.

body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

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

<select>
  <option val="">Please choose</option>
  <option val="1">Option 1</option>
  <option val="2">Option 2</option>
  <option val="3">Option 3</option>
  <option val="4">Option 4</option>
</select>

Answer 1

Vous devez mettre background-color sur le option et non la balise select tag...

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 donner un style à chacun des option tags utilisez le css attribute sélecteur :

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"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

Answer 2

Je ne sais pas si vous l'avez envisagé ou non, mais si votre application est basée sur la coloration de divers groupements d'éléments, vous devriez probablement utiliser la fonction <optgroup> couplée à une classe pour un référencement plus poussé. Par exemple :

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

et ensuite, dans l'en-tête de votre document, écrivez le css comme ceci :

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

Answer 3

Oui, vous pouvez le régler de la manière inverse :

select { /* desired background */ }
option:not(:checked) { background: #fff; }

Vérifiez son fonctionnement ci-dessous :

select {
  margin: 50px;
  width: 300px;
  background: #ff0;
  color: #000;
}

option:not(:checked) {
  background-color: #fff;
}

<select>
  <option val="">Select Option</option>
  <option val="1">Option 1</option>
  <option val="2">Option 2</option>
  <option val="3">Option 3</option>
  <option val="4">Option 4</option>
</select>

Answer 4

Comme certaines des réponses, mais sans vraiment le dire, il est possible d'ajouter une classe à la balise d'option et d'utiliser les classes css... Cela fonctionne actuellement pour moi sans problème sous IE (voir les ss ci-dessus).

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS :

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

Answer 5

Une autre option consiste à utiliser Javascript :

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

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