Comment changer la couleur de fond de l'option select box?

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'articles, vous devriez probablement utiliser la balise <optgroup> couplée à une classe pour 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>

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

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

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

Oui, vous pouvez les définir en oppisite façon à l'aide de ce,

option:not(:checked) { }

cochez cette démo 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 indiqué, est d'ajouter une classe à l'étiquette d'option réelle et 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;
}

si vous voulez vraiment le style à l'intérieur de a, envisager de passer à un JavaScript / CSS basé tomber comme http://getbootstrap.com/2.3.2/components.html#dropdowns ou https://silviomoreto.github.io/bootstrap-select/examples / . Cela parce que les navigateurs comme IE ne permettent pas le style des options dans les éléments . Chrome / OSX a aussi ce problème - vous ne pouvez pas choisir les options de style.

cependant un avertissement est attaché à cette approche. Ces types de menus fonctionnent très différemment sur les plateformes mobiles parce que les éléments natifs ne sont pas utilisés. Ils peuvent avoir des bizarreries ennuyeuses sur le bureau aussi bien. Mes conseils: 1) ne pas écrire votre propre et 2) trouver une bibliothèque qui a été vraiment bien testé.

$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>';

ajouter $htmlIngressCss dans votre portion html :)

il suffit de changer de couleur 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'attribut CSS, mais plus puissant)

Mes sélections ne colorieraient pas l'arrière-plan jusqu'à ce que j'ajoute !important pour le style.

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

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

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

Lire ici: smashing magazine

eventuellement , vous ne trouverez aucun article technique du w3c ou autre adressé à ce sujet. Le style formulaire éléments, en particulier, sélectionnez les cases n'est pas entièrement pris en charge, cependant, vous pouvez conduire autour... avec un peu d'effort!

éléments de forme de style HTML

Construire Des Widgets Personnalisés

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