Como estilizar a <option> apenas com CSS?

102

Nota: Esta questão não é sobre como fazer um menu suspenso personalizado. É apenas sobre possibilidades de <option>elementos de estilo dentro do elemento selecionado em CSS

Como posso estilizar <option>um <select>elemento com compatibilidade entre navegadores? Eu conheço muitas formas de JavaScript que personalizam o menu suspenso para conversão <li>, sobre as quais não estou perguntando.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Estou perguntando o que seria possível apenas com CSS, com compatibilidade para IE9 +, Firefox e Chrome.

insira a descrição da imagem aqui

Eu quero estilizar assim ou o mais próximo possível.

insira a descrição da imagem aqui

Tentei aqui http://jsfiddle.net/jitendravyas/juwz3/3/ , mas o Chrome não mostra nenhum estilo, exceto a cor da fonte, enquanto o Firefox mostra um pouco mais. Como fazer com que a borda e o preenchimento também funcionem no Chrome?

css html-select Jitendra Vyas
fonte
@ManseUK - Não se trata apenas de <option>toda a lista suspensa
Jitendra Vyas
2
@ManseUK: Não tenho certeza se é o mesmo. Essa pergunta pergunta se você pode estilizar a <select>aparência do elemento na página. Esta pergunta pergunta se você pode estilizar a lista de <option>elementos.
Andy E
13
Pelo amor de Deus, esta NÃO é uma duplicata de QUALQUER uma das duas questões interligadas (que, a propósito, são diferentes uma da outra). Um é apenas sobre o estilo do select e não da opção, enquanto este pergunta sobre o estilo também das opções, e o outro não tem o requisito only-css / no-js.
matteo de
12
Estou cansado de ver perguntas erroneamente marcadas como duplicadas ou fechadas incorretamente, permanecendo assim por anos, apesar de terem sido provadas erradas.
matteo de
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Respostas:

70

EDITAR 2015 maio

Exoneração de responsabilidade: peguei o snippet do link de resposta abaixo:

Atualização Importante!

Além do WebKit, a partir do Firefox 35 poderemos usar a appearancepropriedade:

Usando -moz-appearancecom o nonevalor em uma caixa de combinação agora remova o botão suspenso

Portanto, agora, para ocultar o estilo padrão, é tão fácil quanto adicionar as seguintes regras em nosso elemento de seleção:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Para suporte ao IE 11, você pode usar [ ::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Resposta Antiga

Infelizmente, o que você pergunta não é possível usando CSS puro. No entanto, aqui está algo semelhante que você pode escolher como uma solução alternativa. Verifique o código ao vivo abaixo.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
Expandir trecho

EDITAR

Aqui está a pergunta que você fez há algum tempo. Como estilizar uma lista suspensa <select> com CSS apenas sem JavaScript? Como diz lá, apenas no Chrome e até certo ponto no Firefox você pode conseguir o que deseja. Caso contrário, infelizmente, não existe uma solução CSS pura para cross-browser para estilizar um select.

Savas Vedova
fonte
3
+1 obrigado, é um bom código. mas no meu caso eu quero fazer com <select>. o uso de <div>não é semanticamente correto.
Jitendra Vyas
2
@JitendraVyas, eu sei, mas como respondi, isso não é possível. O que você conseguiu na primeira foto é o máximo que você pode fazer. Veja a edição. A propósito, eu respondi sua pergunta anterior também, por favor, veja.
Savas Vedova
A parte 'atualização importante' infere que você pode estilizar as optiontags com css, mas não pode, você só pode estilizar a selecttag. Que é mostrado nesta resposta
svnm
Aqui está uma versão JavaScript do exemplo acima que adiciona callback e alguns outros recursos úteis: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs
4

Não existe uma maneira cruzada de navegadores de estilizar elementos de opção, certamente não na extensão de sua segunda captura de tela. Você pode conseguir colocá-los em negrito e definir o tamanho da fonte, mas isso é tudo ...

danwellman
fonte
2

Já brinquei com itens selecionados antes e sem substituir a funcionalidade com JavaScript, não acho que seja possível no Chrome. Quer você use um plug-in ou escreva seu próprio código, o CSS só é proibido para o Chrome / Safari e, como você disse, o Firefox é melhor em lidar com isso.

cchana
fonte
Remova o último parágrafo - o URL não está acessível online.
Kumarharsh de