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

J'ai une selectboîte et j'essaye de changer la couleur d'arrière-plan des options quand la selectboîte a été cliquée et montre toutes les options.

Voir Fiddle

HTML:

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

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 background-colorl' optionétiquette et non l' selectétiquette ...

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 souhaitez styliser chacune des optionbalises .. utilisez le attributesélecteur 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"] {
  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>

Je ne sais pas si vous l'avez envisagé ou non, mais si votre application est basée sur la coloration de divers regroupements d'éléments, vous devriez probablement utiliser la <optgroup>balise associée à une classe pour un référencement ultérieur. 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>

puis dans la 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>

Oui, vous pouvez définir cela de manière oppisite en utilisant ceci,

option:not(:checked) { }

vérifie ça demo jsFiddle

HTML

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

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

Semblable à certaines des réponses, mais pas vraiment énoncées, est d'ajouter 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).

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

Mes sélections ne coloreraient pas l'arrière-plan jusqu'à ce que j'aie ajouté! Important au style.

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

Si vous voulez vraiment styliser le dans un, envisagez de passer à une liste déroulante basée sur Javascript / CSS telle que http://getbootstrap.com/2.3.2/components.html#dropdowns ou https://silviomoreto.github.io/ bootstrap-select / examples / . En effet, les navigateurs tels que IE n'autorisent pas le style des options dans les éléments . Chrome / OSX a également ce problème - vous ne pouvez pas styliser 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 bizarreries ennuyeuses sur le bureau. Mon conseil est 1) n'écrivez pas la vôtre et 2) trouvez une bibliothèque qui a été vraiment bien testée.

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

La spécification CSS 2 n'a pas abordé le problème de la façon dont les éléments de formulaire doivent être présentés aux utilisateurs période!

Lire ici: le magazine fracassant

Finalement , vous ne trouverez jamais aucun article technique du w3c ou autre adressé à ce sujet. Le style des éléments de formulaire, en particulier les zones de sélection, n'est pas entièrement pris en charge, mais vous pouvez vous déplacer ... avec un peu d'effort!

Stylisation des éléments de formulaire HTML

Création de widgets personnalisés

Ne perdez pas de temps avec des hacks, lisez les liens et découvrez comment les pros font le travail!

Changez simplement la couleur bg

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

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)

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

ajoutez $htmlIngressCssvotre partie html :)