Personalizando o formulário
CSS - Personalizar campos de formulário com CSS
Publicidade
Personalizando os Campos inputs dos formulários utilizando CSS
Informação:Abaixo uma explicação bem simples de como configurar todos os campos de um formulário sem criar uma classe especifica para cada campo (input, select, text area, botão)
Quais Navegadores Aceitam essas configurações
Todos os navegadores modernos aceitam a personalização dos campos input, mas como iremos utilizar CSS3 nesses exemplos a limitação vai variar de acordo com a compatibilidade dos navedores com o CSS3 e não com a configuração do input.
Vamos aos exemplos
input[type=text] {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px #333333;
-moz-box-shadow: 1px 1px 2px #333333;
-webkit-box-shadow: 1px 1px 2px #333333;
background: #cccccc;
border: 1px solid #000000;
width: 150px
}
textarea {
border: 1px solid #000000;
background: #cccccc;
width: 150px;
height: 100px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 1px 2px #333333;
-moz-box-shadow: 1px 1px 2px #333333;
-webkit-box-shadow: 1px 1px 2px #333333;
}
input[type=text]:hover,
textarea:hover {
background: #ffffff;
border: 1px solid #990000;
}
input[type=submit] {
background: #006699;
color: #ffffff;
}
Como podemos ver além de podermos configurar qualquer tipo de campo (área de texto, select menu, botões), é possivel também configurar os atributos do mouse hover.
Dessa maneira todos os campos dos formulários do site terão as mesmas configurações, sendo possível ainda usar os ID dos input ou influenciar as classes para criar padrões de formulários.
Por exemplo: Você pode configurar um formulário de contato de um jeito e um de newsletter de outro jeito sem precisar criar classes especificas.
Obs: Veremos resultados mais interessantes nos navegadores Firefox, Google Chrome, Safari, Opera e Internet Explorer 9.0.
Veja o Resultado:
Publicidade
Autor: Danilo Luna
Arte e Desenvolvimento
Gostou dessa dica?
4 Voto(s)
Arte e Desenvolvimento
