Cambia il colore di sfondo dell'opzione di selezione della casella

Ho un select casella e sto cercando di cambiare il colore di sfondo delle opzioni quando la selectcasella è stata cliccata e mostra tutte le opzioni.

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

Devi mettere background-coloril optiontag e non il selecttag ...

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

Se vuoi applicare uno stile a ciascuno dei optiontag, usa il attributeselettore 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>

Non so se lo hai considerato o meno, ma se la tua applicazione è basata sulla colorazione di vari raggruppamenti di elementi dovresti probabilmente usare il <optgroup>tag accoppiato con una classe per ulteriori riferimenti. Per esempio:

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

e poi nell'intestazione del tuo documento scrivi il css in questo modo:

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

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

Sì, puoi impostarlo in modo opposto usando questo,

option:not(:checked) { }

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

Simile ad alcune delle risposte, ma non realmente dichiarate, è aggiungere una classe al tag dell'opzione effettivo e utilizzare le classi CSS ... questo attualmente funziona per me senza problemi su IE (vedi sopra 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;
}

Le mie selezioni non avrebbero colorato lo sfondo finché non avessi aggiunto! Importante allo stile.

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

Se vuoi davvero modellare l'interno di a, considera il passaggio a un menu a discesa basato su Javascript / CSS come http://getbootstrap.com/2.3.2/components.html#dropdowns o https://silviomoreto.github.io/ bootstrap-select / examples / . Questo perché browser come IE non consentono lo stile delle opzioni all'interno degli elementi . Anche Chrome / OSX ha questo problema: non puoi scegliere le opzioni di stile.

Tuttavia un avvertimento è allegato a tale approccio. Questi tipi di menu funzionano in modo molto diverso sulle piattaforme mobili perché non vengono utilizzati elementi nativi. Possono avere fastidiose stranezze anche sul desktop. Il mio consiglio è 1) non scrivere il tuo e 2) trovare una libreria che sia stata davvero ben testata.

Ecco cosa ho imparato sull'argomento!

La specifica CSS 2 non ha affrontato il problema di come gli elementi del modulo dovrebbero essere presentati agli utenti periodo!

Leggi qui: rivista strepitosa

Infine , non troverai mai alcun articolo tecnico di w3c o altro indirizzato a questo argomento. Lo stile degli elementi del modulo in particolare delle caselle di selezione non è completamente supportato, tuttavia puoi guidare in giro ... con un po 'di sforzo!

Applicazione di stili agli elementi del modulo HTML

Creazione di widget personalizzati

Non perdere tempo con gli hack e leggi i link e scopri come i professionisti portano a termine il lavoro!

Cambia semplicemente il colore bg

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

Un'altra opzione è usare Javascript:

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

(Non così pulito come il selettore di attributi CSS, ma più potente)

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

aggiungi la $htmlIngressCsstua porzione html :)