Cascading Style Sheets não se limita a formatar textos. Você pode
alterar a aparência de objetos de formulários como botões, caixas de textos e
caixas de combinação.
Para inserir botões do tipo Submeter ou Enviar
na sua página HTML é preciso digitar as linhas abaixo.
Estes botões serão exibidos assim no seu navegador. Estou
utilizando o Internet Explorer.
No entanto, você pode alterar a cor do fundo destes objetos. É...
Internet é cor e não justifica utilizar objetos com esta cor padrão, que não tá com
nada.
Para alterar a cor do fundo dos objetos, utilize o atributo background-color.
A sintaxe é:
style="background-color:cor"
Para definir a cor, dê preferência a codificação hexadecimal. Você poderia utilizar o
nome da cor como red, blue, etc..., mas com a representação hexadecimal é possível
conseguir variações de cores.
O IExplorer exibirá os objetos como na figura abaixo
Pô... o texto não ficou legal.
Então, altere a cor da fonte. É fácil. Utilize o atributo color.
A sintaxe é: color:cor. Neste exemplo, eu utilizei a cor branca ( #FFFFFF ).
E o resultado será este aí.
Caixas de texto.
As caixas de texto são utilizadas para o usuário digitar informações
como nome, endereço, código postal, etc.
A aparência padrão é esta aí.
É possível, também, alterar as cores do fundo e da fonte através
dos atributos background-color e color.
Eu escolhi azul para a cor do fundo ( background-color:¹#3300FF¹ )
e branca para a fonte ( color:¹#FFFFFF¹ )
Caixas de combinação.
Com caixas de combinação você oferece ao internauta um menu
com opções. Você pode definir uma cor para todas as opções ou tratá-las separadamente.
O que for definido dentro de <select...> será aplicado em todas as opções do
menu.
Aqui, eu utilizei o nome da cor ( red ) para o fundo do menu.
Este não é o meu procedimento padrão. Em 99% das minhas páginas, prefiro
a codificação hexadecimal.
O resultado é este aí.
Além da cor do fundo e da fonte, é possível alterar o tamanho do
menu através do atributo width.
Se você utilizar a porcentagem para determinar o tamanho do
objeto, ele irá variar de acordo com o tamanho da tela.
Cores diferentes para cada opção.
É... você pode viajar mais um pouco. Eu defini com o backgroun-color
a cor branca para o fundo do menu. Isto vale para todas as opções da lista.
Mas, meu( minha ) jovem, observe que defini uma cor diferente para a fonte de cada opção
da lista. Eu inclui o atributo color para cada option.
E veja no que deu.
Se é possível utilizar o atributo color para cada option, é
claro que é possível, também, fazer o mesmo com background-color.
Cores do fundo diferentes para cada opção da lista.
