helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Exemplo de um código para decorar um campo select de um formulário, utilizando folhas de estilos em cascata.
Por Federico Elgarte
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;}
Por Federico Elgarte
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;}