CSS: pseudo classe selecionada semelhante a: verificado, mas para elementos <select>

86

Existe uma maneira de estilizar o <option>elemento atualmente selecionado em um <select>elemento?

Eu poderia então dar uma cor de fundo para o elemento de opção atualmente selecionado? Dessa forma, posso definir o estilo da opção que está atualmente visível no menu suspenso fechado.

Web designer
fonte

Respostas:

123

a :checkedpseudoclasse inicialmente se aplica a tais elementos que têm o HTML4 selectede checkedatributos

Fonte: w3.org


Portanto, este CSS funciona, embora colornão seja possível definir o estilo em todos os navegadores:

option:checked { color: red; }

Um exemplo disso em ação, ocultando o item atualmente selecionado da lista suspensa.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>


Para definir o estilo da opção atualmente selecionada na lista suspensa fechada , você pode tentar inverter a lógica:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */
Emmett
fonte
4
Você testou? Não parece funcionar para mim no FF8. atualização: também não funciona no Chromium 15.
Brigand
1
@emmett Eu também verifiquei no Chrome 16. Como eu disse em meu comentário anterior, ele estiliza a opção selecionada na lista suspensa, mas não aquela na área visível fechada.
Web_Designer
2
@Web_Designer Ok, entendo o problema. Editei minha resposta com outra solução (instável).
Emmett
resposta aceita não funciona para mim no cromo. você pode testar aqui: jsfiddle.net/hk4s0ech
Andre Chenier
17

Na verdade, você só pode estilizar algumas propriedades CSS em : elementos de opção modificados . colortambém não funciona, background-colormas você pode definir um background-image.

Você pode combinar isso com gradientes para fazer o truque.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Funciona em gecko / webkit.

Antwan
fonte
A resposta aceita não funcionou para mim, mas esta solução funcionou. Obrigado!
Anthony Hilyard
Observe que você também pode aplicar o filtro assim: Opção: marcada {filtro: escala de cinza (1);} Isso é semelhante a como hoje em dia você pode estilizar caixas de seleção e botões de opção no Chrome para torná-los não azuis.
KS74 01 de
3

Isso funcionou para mim:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
Neoweiter
fonte