Hoje nesse tutorial, falaremos sobre customização de formulários com css.

Pra você criar o seu formulário totalmente personalizado, desde os campos de texto, estilo das bordas, cor, espessura e etc.

O HTML (formulário)

Vamos criar uma página HTML (formulário.html, ou qualquer outro nome) e vamos escrever o seguinte código:

<html>
  <head>
    <title>Meu Formulário Personalizado</title>
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/estiloie.css">
    <![endif]-->
    
  </head>
<body>
  <div id="area">
    <form id="formulario" autocomplete="off">
      <fieldset>
        <legend>Formulário</legend>
        <label>Nome:</label><input class="campo_nome" type="text"><br>
        <label>Email:</label><input class="campo_email" type="password"><br>
        <label>Mensagem:</label><br><textarea class="msg" cols="35" rows="8"></textarea><br>
        <input class="btn_submit" type="submit" value="Enviar">
      </fieldset>
    </form>
  </div>
</body>
</html>
Listagem 1. Formulário.html (Apenas a estrutura, sem estilização)

A página vai ficar assim:

Estrutura do código da Listagem 1
Figura 1. Estrutura do código acima (formulário.html sem estilização)

O código acima vai ser nosso formulário, ainda sem formatação, agora vamos aplicar o css.

obs.: Eu criei uma pasta para o css , você pode colocá-lo onde quiser, só não esqueça de alterar o parâmetro 'href' da tag 'link' para a localização do seu arquivo.

saiba mais Saiba mais sobre como criar formulários HTML

O CSS

Agora nós vamos criar a folha de estilos do nosso formulário , que ira personalizar os campos fieldset, legend, label, input, textarea e submit, então vamos lá.

Primeiro vamos formatar o campo fieldset e delimitar o tamanho dele, ao tamanho do nosso formulário.

obs.: As divs 'area' e 'formulario' são opcionais, utilizadas apenas para centralização e fixação do formulário na tela.

  #area
  {
    position:relative;
    left:37%;
    top:29%;
    width:320px;
    height:270px;
  }
  #area #formulario
  {
    position:absolute;
    display:block;   
  }
  fieldset
  {
    width:300px;
    height:250px;
  }
Listagem 2. estilo.css (Estilização do fieldset do formulário.html)

Agora vamos definir a formatação do texto da legenda.

  #area
  {
    position:relative;
    left:37%;
    top:29%;
    width:320px;
    height:270px;
  }
  #area #formulario
  {
    position:absolute;
    display:block;   
  }
  fieldset
  {
    width:300px;
    height:250px;
  }
  legend
  {
    font-style:bold;
    font-family: “Segoe UI”,”Arial”,”Times New Roman”;
  }
Listagem 3. estilo.css (Estilização da legend do formulário.html)

Perceba que apenas a font da tag 'legend' foi alterada, o restante permanece com a font e o estilo padrão.

Agora nós vamos padronizar a label, e os campos input, fazendo com que o nosso formulário fique alinhado.

  #area
  {
    position:relative;
    left:37%;
    top:29%;
    width:320px;
    height:270px;
  }
  #area #formulario
  {
    position:absolute;
    display:block;   
  }
  fieldset
  {
    width:300px;
    height:250px;
  }
  


  legend
  {
    font-style:bold;
    font-family: "Segoe UI";
  }
  #formulario label
  {
    position:absolute;
    left:19px;
    margin-right:5px;
  }
  

  #formulario input.campo_nome
  {
    position:absolute;
    left:95px;
    top:23px;
    width:225px;
  }
  #formulario input.campo_email
  {
    position:absolute;
    left:95px;
    margin-top:2px;
    width:225px;
  }
Listagem 4. estilo.css (Alinhamento dos campos do formulário.html)

Até o momento ele está assim:

Formulário Alinhado e Formatado (Legend)
Figura 2. Formulário Alinhado e Formatado (Legend)

Agora com tudo alinhado, vamos a estilização.

Primeiramente, vamos voltar à nossa fieldset , e alterar a cor de fundo, depois vamos colorir os campos de texto, a textarea e o submit(botão).

  #area
  {
    position:relative;
    left:37%;
    top:10em;
    width:320px;
    height:270px;
  }
  #area #formulario
  {
    position:absolute;
    display:block;   
  }
  

  fieldset
  {
    background-color:#A7C0DC;
    width:300px;
    height:250px;
  }
  legend
  {
    font-weight:bold;
    font-family: "Segoe UI","Arial","Times New Roman";
  }
  #formulario label
  {
    position:absolute;
    left:19px;
    margin-right:5px;
  }
  #formulario input.campo_nome
  {
    background-color:#f1ff00;
    position:absolute;
    left:95px;
    top:23px;
    width:225px;
  }
  #formulario input.campo_email
  { 
    background-color:#f1ff00;
    position:absolute;
    left:95px;
    margin-top:2px;
    width:225px;
  }
  #formulario textarea.msg
  {
    position:absolute;
    background-color:#f1ff00;
  }
  




  #formulario input.btn_submit
  {
    border-style:dashed;
    position:absolute;
    bottom: 0.5em;
    right:10px;
    background-color:#f1ff00;
  }
Listagem 5. estilo.css (Estilização completa do formulário.html)

Formulário com transformação quase completa
Figura 3. Formulário com transformação quase completa (Faltando apenas o 'efeito dashed' do botão)

Vamos a explicação do código acima.:

  • fieldset: Definimos o tamanho(width,height), e a cor de fundo(background-color)
  • legend: Alteramos a font (font-family) e colocamos o texto em negrito(font-weight)
  • input: Definimos as cores de fundo (background-color) e o posicionamento(varia de acordo com o seu formulário)
  • textarea: adicionamos a cor de fundo(background-color)

obs.: no input.btn_submit (botão) foi utilizado a tag 'border-style' com o atributo 'dashed' , isso é pra fazer a borda tracejada do botão.

Resultado Final
Figura 4. Resultado Final

Atenção.: Para visualização/edição da página no Internet Explorer, utilize o 'hack' que está no link abaixo, junto com o código fonte da página. (O hack está dentro do zip das fontes na pasta css e já está aplicado)

Então é isso pessoal, até a próxima!