Alterar a cor de fundo da opção da caixa de seleção

Eu tenho uma selectcaixa e estou tentando alterar a cor de fundo das opções quando a selectcaixa foi clicada e mostra todas as opções.

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

Você precisa colocar background-colora optiontag e não a 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 você deseja estilizar cada uma das optiontags, use o attributeseletor 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>

Não sei se você o considerou ou não, mas se o seu aplicativo se baseia em colorir vários agrupamentos de itens, você provavelmente deve usar a <optgroup>tag juntamente com uma classe para obter mais referências. Por exemplo:

<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 então, no cabeçalho do seu documento, escreva o css assim:

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

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

Sim, você pode configurá-lo de maneira diferente usando este,

option:not(:checked) { }

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

Semelhante a algumas das respostas, mas não realmente declaradas, é adicionar uma classe à tag de opção real e usar as classes css ... isso atualmente está funcionando para mim sem problemas no IE (veja acima 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;
}

Minhas seleções não pintariam o fundo até que eu adicionasse! Importante ao estilo.

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

Se você realmente deseja estilizar o dentro de a, considere mudar para um menu suspenso baseado em Javascript / CSS, como http://getbootstrap.com/2.3.2/components.html#dropdowns ou https://silviomoreto.github.io/ bootstrap-select / examples / . Isso ocorre porque navegadores como o IE não permitem o estilo de opções nos elementos . O Chrome / OSX também tem esse problema - você não pode estilizar opções.

No entanto, um aviso é anexado a essa abordagem. Esses tipos de menus funcionam de maneira muito diferente nas plataformas móveis, porque os elementos nativos não são usados. Eles também podem ter peculiaridades irritantes na área de trabalho. Meu conselho é 1) não escreva você mesmo e 2) encontre uma biblioteca que tenha sido muito bem testada.

Aqui vai o que eu aprendi sobre o assunto!

A especificação CSS 2 não abordou o problema de como os elementos do formulário devem ser apresentados ao período dos usuários!

Leia aqui: revista sensacional

Eventualmente , você nunca encontrará nenhum artigo técnico do w3c ou outro endereçado a este tópico. Elementos de formulário de estilo em determinadas caixas de seleção não são totalmente suportados, no entanto, você pode dirigir por aí ... com algum esforço!

Estilo de elementos de formulário HTML

Criando widgets personalizados

Não perca tempo com hacks, leia os links e saiba como os profissionais fazem o trabalho!

Simplesmente mude a cor da BG

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

Outra opção é usar o Javascript:

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

(Não é tão limpo quanto o seletor de atributos CSS, mas é mais poderoso)

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

adicione $htmlIngressCsssua parte html :)