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 class="um">Opcao</option>
<option class="dois">Opcao</option>
<option class="um">Opcao</option>
<option class="dois">Opcao</option>
<option class="um">Opcao</option>
<option class="dois">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;}

Podemos ver o exemplo em funcionamento.