WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Personalizando o formulário

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:
 

Nome:
Email:
 
Informações:
 
 
Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]