Decorar um campo select de formulário com CSS
Exemplo de um código para decorar um campo select de um formulário, utilizando folhas de estilos em cascata.Por Federico Elgarte
Publicado em: 24/3/06
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.
Comentários do artigo
