Voltar para o site

Estilos CSS em controles de formulários

Publicado em: 15/12/2003

As tags HTML para formulários e sua estilização com CSS

Os diferentes tipos de formulários que você insere em seu documento HTML são apresentados com um formato e cores padrão, que nem sempre estão de acordo com o projeto visual da sua página.

Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário.

Neste tutorial mostrarei as regras CSS, básicas que permitem o controle sobre a apresentação dos formulários.

As tags HTML para formulários abordadas são as listadas abaixo:

  • input;
  • select;
  • textarea;
  • form;

E um exemplo completo:

  • E como exemplo prático de aplicação de estilo em formulários veremos como estilizar um formulário para login.

Como estudar e entender os exemplos

Para cada tag a estilizar, apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

Estilo CSS na tag <input>

Abaixo os objetos de formulário do tipo input com sua apresentação (visual) default.

As tags input dos formulários, sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objetos input.

<html>
<head>
<style type="text/css">
input { 
background-color: #B0E0E6; 
font: 12px verdana, arial, helvetica, sans-serif;
color:#003399;
border:2px solid #000099;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="radio" name="radiobutton"
 value="radiobutton">
</form>
<form name="form2" method="post" action="">
<input type="checkbox" name="checkbox"
 value="checkbox">
</form>
<form name="form3" method="post" action="">
<input type="text" name="textfield">
</form>
<form name="form4" method="post" action="">
<input type="submit" name="Submit" 
value="Enviar">
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, nos objetos de formulário:

As tags input do formulário, com estilização

Estilo CSS na tag <select>

Abaixo o objeto de formulário do tipo select com sua apresentação (visual) default.

A tag select sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objeto select

<html>
<head>
<style type="text/css">
select { 
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form5" 
method="post" action="">
<select name="select">
<option value="item_1">
item_1 da lista</option>
<option value="item_1">
item_2 da lista</option>
<option value="item_1">
item_3 da lista</option>
<option value="item_1">
item_4 da lista</option>
</select>
</form>

</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário select

A tag select estilizada

Nota: Até esta data, não há como estilizar com CSS, a setinha do select.

Estilo CSS na tag <textarea>

Abaixo o objeto de formulário do tipo textarea com sua apresentação (visual) default.

A tag textarea sem estilização

A seguir a folha de estilo incorporada e o código HTML, para os objeto textarea

<html>
<head>
<style type="text/css">
textarea { 
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form6" method="post" action="">
<textarea name="textarea" rows="9"></textarea>
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário textarea

A tag textarea estilizada

Estilo CSS em formulário para LOGIN

O formulário login padrão

Abaixo o código HTML e o objeto de formulário do tipo login padrão, com sua apresentação (visual) default.

<form name="login"method="post" action="#"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"/> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
Formulário de login sem estilização

1o. passo: Dimensionar e aplicar um fundo no formulário

Vamos assumir que nosso formulário terá 380 pixels de largura total e um fundo na cor bege (#FFFFCC).

Para estilizar o formulário criamos uma classe (vamos denominá-la .login) a ser aplicada na tag form e em consequência teremos um seletor de classe com esta sintaxe: form.login

Observe o código a seguir:

<html>
<head>
<style type="text/css">
form.login { 
background-color: #FFFFCC; 
width:380px;}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo

2o. passo: Estilizar as letras e aplicar uma borda no formulário

Vamos definir tipo e cor de letra, colocar uma borda e um espaçamento a esquerda.

Observe estas novas regras acresentadas no código a seguir:

<html>
<head>
<style type="text/css">
form.login { background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
</style>
</head>
<body>
<form name="login"method="post" 
action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo e nas fontes

3o. passo: Estilizar as tags <input> "usuário" e "senha"

Vamos assumir que estes campos terão um fundo em tom azul médio (#B0E0E6) e as letras tom azul claro (#0033CC).

Uma margem direira de 20 px irá separar o campo senha do botão OK.

Para estilizar estes campos criamos uma classe (vamos denominá-la .campos) a ser aplicada na tag input do usuário e da senha.

Observe estas novas regras acresentadas no código a seguir: 

<html>
<head>
<style type="text/css">
form.login {
 background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
.campos {
background-color:#B0E0E6;
font: 11px georgia, sans-serif;
color:#0033CC;
margin-right: 20px;
}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15" class="campos"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15" class="campos"> 
<input type="submit" name="Submit" value="OK" tabindex="3"> 
</label> 
</form>
</body>
</html>

Este é o efeito da folha de estilo acima, no objeto de formulário login

Formulário de login com estilização no fundo, fontes e campos

4o. passo: Estilizar a tag <input> "botão OK"

Vamos assumir que o botão terá uma cor em tom avermelhado escuro (#CC3300) e as letras tom azul claro (#CCFFFF).

Observe estas novas regras acresentadas no código a seguir: 

<html>
<head>
<style type="text/css">
form.login {
 background-color: #FFFFCC; 
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
.campos {
background-color:#B0E0E6; 
font: 11px georgia, sans-serif;
color:#0033CC;margin-right: 20px;
}
.botao {
background-color: #CC3300;
font: 10px Arial, sans-serif;
color: #CCFFFF;
}
</style>
</head>
<body>
<form name="login"method="post" action="#" class="login"> 
<label>Usuário: 
<input name="user" type="text" tabindex="1" size="15" class="campos"> 
</label>
<label>Senha: 
<input name="password" type="password" tabindex="2" size="15" class="campos"> 
<input type="submit" name="Submit" value="OK" tabindex="3" class="botao"> 
</label> 
</form>
</body>
</html>

Este é o efeito final da aplicação de estilo, no objeto de formulário login

Formulário de login com estilização final

Neste tutorial mostrei as linhas gerais da técnica pra estilizar formulários

O entendimento do que foi exposto propiciará a você, criar uma série de outros efeitos bastante interessantes na estilização de formulários.

Como seu primeiro exercício, sugiro estilizar este mesmo formulário de login de modo a que ele fique disposto na vertical. Usuário na primeira linha, senha na segunda linha e botão na terceira linha.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo