Jak zmienić kolor tła opcji zaznacz pole?

Nie wiem, czy to rozważałeś, czy nie, ale jeśli Twoja aplikacja opiera się na kolorowaniu różnych grup przedmiotów, prawdopodobnie powinieneś użyć znacznika <optgroup> połączonego z klasą do dalszego odwoływania się. 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 dokumentu napisz css w następujący sposób:

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

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

Tak możesz to ustawić 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 tak naprawdę nie podane, jest dodanie klasy do rzeczywistego znacznika opcji i użycie klas css...to obecnie działa dla mnie bez problemu na 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;
}

Jeśli naprawdę chcesz stylizować within a, rozważ przejście do rozwijanej listy opartej na Javascript/CSS, takiej jak http://getbootstrap.com/2.3.2/components.html#dropdowns lub https://silviomoreto.github.io/bootstrap-select/examples/. dzieje się tak dlatego, że przeglądarki takie jak IE nie pozwalają na stylizowanie opcji w elementach . Chrome / OSX również ma ten problem - nie można stylować opcji.

Do tego podejścia dołączone jest jednak Ostrzeżenie. Tego typu Menu Działa bardzo inaczej na platformach mobilnych, ponieważ nie są używane elementy natywne. Mogą również mieć irytujące dziwactwa na pulpicie. Moja rada to 1) nie pisz własnych i 2) Znajdź bibliotekę, która została naprawdę dobrze przetestowana.

$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 $htmlIngressCss w swojej części html:)

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)

Moje selekcje nie będą kolorować tła, dopóki nie dodam !ważne dla stylu.

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

Oto czego się nauczyłem na ten temat!

Specyfikacja CSS 2 nie rozwiązała problemu w jaki sposób elementy formularza powinny być prezentowane użytkownikom!

Przeczytaj tutaj: smashing magazine

Ostatecznie , nigdy nie znajdziesz żadnego artykułu technicznego z w3c lub innego zaadresowanego do tego tematu. Stylizacja elementów formularzy w poszczególnych polach wyboru nie jest w pełni obsługiwana, można jednak poruszać się po niej... z niektórymi wysiłek!

Stylizacja elementów formularza HTML

Tworzenie Własnych Widżetów

Nie trać czasu na hacki E takie przeczytaj linki i dowiedz się, jak profesjonaliści wykonują swoją pracę!