Decorar um campo select de formulário com CSS
CSS oferece infinitas opções para decorar todos os elementos suportados por HTML. Desta vez, mostraremos como aplicar nosso estilo personalizado aos drop down menus.
Primeiro, definiremos a tag option, que conterá o estilo de letra, o tamanho, a cor, etc…
option {font-family: verdana; font-size: 10px; color: white}
Logo, definiremos dois estilos vinculados à option que conterão as cores de fundo de cada opção:
option.uno {background-color: #CCC}
option.dos {background-color: #666}
O último passo é colocar o drop down menu com nosso estilo personalizado:
<select>
<option>Opcao</option>
<option>Opcao</option>
<option>Opcao</option>
<option>Opcao</option>
<option>Opcao</option>
<option>Opcao</option>
</select>
Além de atribuir estilos às options, também devem ser definidos os estilos do campo select em se. será necessário fazer desta forma, pelo menos, para o navegador Firefox e outros da família de Mozilla.
Para definir o estilo do campo select utilizaremos este código CSS:
SELECT{ font-family: verdana; font-size: 10px; color: white; background-color:#666;}