Como faço para estilizar um < select> dropdown apenas com CSS?

Existe uma forma de estilo <select> dropdown?

Preciso de estilizar um formulário <select> tanto quanto humanamente possível, sem qualquer JavaScript. Quais são as propriedades que eu posso usar para fazer isso no CSS?

Este código precisa de ser compatível com todos os principais navegadores:

  • Internet Explorer 6, 7, e 8
  • Firefox
  • Safari

Eu sei que consigo fazê-lo com JavaScript: Exemplo.

E I'não estou a falar de estilo simples. Eu quero saber, o que podemos fazer melhor apenas com CSS.

Encontrei perguntas similares em Stack Overflow.

E este aqui em Doctype.com.

Peter Mortensen
Pergunta editada :em
Programação
cross-browser html css combobox skinning
13º dezembro 2009 в 3:33
116 vistas

O elemento seleccionado e a sua funcionalidade dropdown são difíceis de estilizar.

atributos de estilo para elemento selecionado por Chris Heilmann confirma o que Ryan Dohery disse em um comentário à primeira resposta:

"O elemento selecionado é parte do e não o cromado do navegador. Portanto, é muito não confiável ao estilo, e não faz necessariamente sentido tentar de qualquer maneira."

Jacob Alvarez
Resposta editada :em
Comentários (0)

<select> tags podem ser estilizadas através de CSS como qualquer outro elemento HTML em uma página HTML renderizada em um navegador. Abaixo está um exemplo (excessivamente simples) que posicionará um elemento selecionado na página e renderizará o texto das opções em azul.

Exemplo de ficheiro HTML (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Resposta editada :em
Comentários (3)

Sim. Você pode estilizar qualquer elemento HTML pelo nome da tag, como este:

select {
  font-weight: bold;
}

É claro que você também pode usar uma classe CSS para dar estilo a ela, como qualquer outro elemento:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Resposta editada :em
Comentários (3)