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
Valorize este artigo:
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
Foram enviados 4 comentários ao artigo
4 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato