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


129

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

Respostas:


163

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>


Eu tirei a opção rgba e parece usar negro agora que vai fazer :)
ngplayground

5
Você pode usar o :nth-child(1..n)seletor CSS .
Samuel Liew

2
Você provavelmente não deve usar o seletor de atributos. Você provavelmente deseja usar o n-ésimo filho ou dar uma aula a cada opção.
Fred

3
Não funciona no Firefox, nem no Chromium (Linux Antergos)
albert

Tente adicionar !imporant. Por exemplo:background: red!important;
michal

19

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>

16

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

O @aswzen atualmente no Chrome está funcionando para mim (v65), mas não no Firefox Quantum (v59).
CPHPython

7

insira a descrição da imagem aqui

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

3

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

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

2

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.


1

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!


1

Simplesmente mude a cor da BG

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


0

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)


0
$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 :)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.