Um formulário já é algo chato de preencher na maioria das vezes. Mas ele não precisa ser feio também e, felizmente, com o poder do CSS, você pode customizar completamente sua aparência.
Você pode especificar no seu CSS uma série de estilos para o elemento <input> em seu formulário. Mas é uma solução genérica demais se nem todas os <input> do seu site devem se comportar da mesma forma. Antigamente eu especificava uma ou mais classes que controlavam borda, cor de fundo, fonte e espaçamento e depois aplicava essas classes a cada elemento. Mas é possível ser mais eficiente e mais criativo do que isso usando o seletor certo. E nem estou falando de CSS3!
O bom e velho CSS2 permite que você determine estilos para tipos de <input>. Por exemplo:
input[type="password"] {
border: 1px solid #c00;
background-color: #f5f5f5;
}
Com o seletor [type=”password”] acima, eu determinei que todos os elementos <input> do tipo password tenham uma borda vermelha e uma cor de fundo acinzentada. Pelo mesmo princípio, eu poderia ter utilizado:
- input[type=”button”]
- input[type=”checkbox’]
- input[type=”image”]
- input[type=”radio’]
- input[type=”reset”]
- input[type=”submit’]
- input[type=”text’]
Por razões óbvias, o <input type=”hidden”> não foi incluído entre as opções. Mas, com o advento do HTML 5, o número de tipos mais que dobra!
Entretanto, os seletores de CSS não param por aí. Com input[disabled][type=”text”], você irá customizar apenas os input do tipo text que estejam desabilitados, por exemplo. E os seletores são cumulativos: input[disabled][type=”text”]:hover cria um estilo para quando o mouse passar por cima de um input do tipo text que esteja desabilitado!
Mais, o seletor :focus permite alterar o estilo do campo de formulário quando ele está em foco, ou seja, quando o cursor do mouse está ativado dentro da caixa, esperando o usuário digitar.
