Zmień kolor tła opcji pola wyboru

Mam selectpudełko i próbuję zmienić kolor tła opcji po selectkliknięciu pola i wyświetleniu wszystkich opcji.

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

Trzeba umieścić background-colorna optiontagu, a nie selecttagu ...

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

Jeśli chcesz nadać styl każdemu z optiontagów ... użyj attributeselektora 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>

Nie wiem, czy rozważałeś to, czy nie, ale jeśli twoja aplikacja opiera się na kolorowaniu różnych grup elementów, prawdopodobnie powinieneś użyć <optgroup>tagu w połączeniu z klasą do dalszych odwołań. Na przykład:

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

a następnie w nagłówku swojego dokumentu napisz css w ten sposób:

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

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

Tak, możesz to ustawić w inny sposób, używając tego,

option:not(:checked) { }

Sprawdź to 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;
}

Podobne do niektórych odpowiedzi, ale nie do końca podane, polega na dodaniu klasy do rzeczywistego tagu opcji i użyciu klas css ... obecnie działa to bez problemu w IE (patrz wyżej 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;
}

Moje wybrane elementy nie będą kolorować tła, dopóki nie dodam! Ważnego do stylu.

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

Jeśli naprawdę chcesz stylizować wewnątrz a, rozważ przejście na listę rozwijaną opartą na Javascript / CSS, taką jak http://getbootstrap.com/2.3.2/components.html#dropdowns lub https://silviomoreto.github.io/ bootstrap-select / przykłady / . Dzieje się tak, ponieważ przeglądarki takie jak IE nie zezwalają na stylizowanie opcji w elementach . Chrome / OSX również ma ten problem - nie możesz stylizować opcji.

Jednak do tego podejścia dołączone jest ostrzeżenie. Te typy menu działają bardzo różnie na platformach mobilnych, ponieważ nie są używane elementy natywne. Mogą mieć irytujące dziwactwa również na komputerze. Moja rada jest taka: 1) nie pisz własnej i 2) znajdź bibliotekę, która została naprawdę dobrze przetestowana.

Oto, czego się dowiedziałem na ten temat!

Specyfikacja CSS 2 nie rozwiązała problemu, jak elementy formularza powinny być prezentowane użytkownikom w okresie!

Przeczytaj tutaj: rozbijający magazyn

Ostatecznie nigdy nie znajdziesz żadnego artykułu technicznego z w3c ani innego poświęconego temu tematowi. Stylizacja elementów formularzy w poszczególnych zaznaczonych polach nie jest w pełni obsługiwana, jednak można jeździć ... z pewnym wysiłkiem!

Stylizowanie elementów formularza HTML

Tworzenie niestandardowych widżetów

Nie trać czasu na hacki, np. Przeczytaj linki i dowiedz się, jak profesjonaliści wykonują swoją pracę!

Po prostu zmień kolor bg

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

Inną opcją jest użycie Javascript:

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

(Nie tak czysty jak selektor atrybutów CSS, ale bardziej wydajny)

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

dodaj $htmlIngressCssswoją część html :)