EasyCode365EasyCode365

Estilizando formulários e botões

Formulários permitem que as pessoas interajam com um site.

Elas podem escrever uma mensagem, assinar uma newsletter, escolher uma opção ou enviar dados de contato. Formulários HTML simples funcionam, mas os estilos padrão do navegador muitas vezes parecem diferentes dependendo do dispositivo e do navegador.

CSS ajuda você a deixar os formulários mais claros, fáceis de examinar e confortáveis de usar.

Lembrete rápido: elementos de formulário

Antes de estilizar formulários, lembre-se das tags HTML comuns:

  • <form> envolve todo o formulário.
  • <label> explica para que serve um campo.
  • <input> cria um campo para digitar, escolher ou marcar algo.
  • <textarea> cria uma caixa de texto maior, com várias linhas.
  • <button> cria uma ação clicável.

Labels são especialmente importantes. O atributo for de um <label> deve corresponder ao id do input.

Somente leitura
<label for="email">E-mail</label> <input id="email" type="email" />

Essa conexão ajuda leitores de tela e permite que o usuário clique no label para focar o input.

Você também pode conectar um label envolvendo o input dentro do label. Você verá esse padrão mais adiante com um checkbox.

Estilizando labels

Labels devem ser fáceis de ler e ficar perto do campo que descrevem.

Por padrão, labels são inline. Para formulários simples, geralmente fica mais limpo colocar cada label acima do campo com display: block.

Editável
<label for="name">Nome</label>
<input id="name" type="text" placeholder="Digite seu nome" />

<style>
  label {
    display: block;
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  input {
    padding: 10px;
  }
</style>

Use margin no label ou no input para criar espaço entre as linhas do formulário.

Estilizando inputs de texto

Inputs de texto normalmente precisam de estilos de largura, padding, borda e fonte.

O padding faz o texto digitado parecer menos apertado. As bordas mostram o formato do campo. box-sizing: border-box mantém o padding dentro da largura que você definiu.

Editável
<input class="text-field" type="text" placeholder="Nome do curso" />

<style>
  .text-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
</style>

Use rem para tamanho de texto quando possível, para que o campo respeite as configurações de tamanho de fonte do navegador do visitante.

Estilizando texto placeholder

Um placeholder é o texto de dica dentro de um campo vazio.

Você pode estilizá-lo com o pseudo-elemento ::placeholder.

Somente leitura

Não use placeholders como o único label. Quando o usuário digita, o placeholder desaparece.

Estilizando estados de foco

Um campo tem foco quando o usuário clica nele ou chega até ele usando a tecla Tab.

Os navegadores mostram um contorno de foco padrão para que o usuário saiba onde está. Você pode manter esse padrão ou substituí-lo por seu próprio estilo de foco claro.

A pseudo-classe :focus-visible costuma ser útil para botões porque normalmente aparece com foco de teclado, não em todo clique do mouse.

Editável
<input class="focus-field" type="email" placeholder="voce@exemplo.com" />

<style>
  .focus-field {
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }

  .focus-field:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }
</style>

Essa regra muda a borda e mantém um contorno visível quando o campo está ativo.

Estilizando checkboxes

Checkboxes são diferentes de inputs de texto.

Navegadores e sistemas operacionais os desenham do seu próprio jeito, então criar checkboxes totalmente personalizados é mais avançado. Para iniciantes, mantenha o checkbox nativo e melhore o espaçamento.

Você também pode usar accent-color para definir a cor marcada em navegadores modernos.

Editável
<label class="checkbox-row">
  <input type="checkbox" />
  Enviar novidades das aulas para mim
</label>

<style>
  .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Arial, sans-serif;
  }

  .checkbox-row input {
    accent-color: #2563eb;
  }
</style>

Isso mantém o checkbox familiar e, ao mesmo tempo, faz com que ele combine com seu design.

Estilizando botões

Botões devem parecer clicáveis.

Estilos comuns de botões incluem padding, cor de fundo, cor do texto, borda, border radius e cursor.

Editável
<button class="primary-button" type="button">Enviar mensagem</button>

<style>
  .primary-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
  }

  .primary-button:hover {
    background-color: #1d4ed8;
  }
</style>

Use :hover para interação com mouse. Em formulários completos, adicione também um estilo de foco visível para que usuários de teclado vejam qual botão está ativo.

Botões desabilitados

Um botão desabilitado não pode ser clicado.

No HTML, adicione o atributo disabled. No CSS, estilize :disabled para que o botão pareça claramente indisponível.

Editável
<button class="save-button" type="button">Salvar</button>
<button class="save-button" type="button" disabled>Salvar</button>

<style>
  .save-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #16a34a;
    color: white;
    font-family: Arial, sans-serif;
    cursor: pointer;
  }

  .save-button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }

  .save-button:focus-visible {
    outline: 3px solid #bbf7d0;
    outline-offset: 2px;
  }
</style>

Não dependa apenas da cor. O cursor not-allowed e o texto mais apagado também ajudam a comunicar o estado desabilitado.

Estilos padrão do navegador

Navegadores adicionam estilos padrão aos formulários para que eles funcionem mesmo sem CSS.

Esses estilos são úteis, mas podem parecer diferentes no Chrome, Safari, Firefox, macOS, Windows, Android e iOS. Definir seu próprio espaçamento, bordas, cores e fontes faz o formulário parecer mais consistente.

Evite remover todos os estilos padrão de uma vez. Comece com mudanças pequenas e claras.

Exemplo executável: formulário de contato estilizado

Este exemplo combina labels, inputs de texto, um checkbox, estados de foco e botões.

Tente clicar ou navegar com Tab pelos campos para ver o estilo de foco.

Editável
<form class="contact-form">
  <label for="contact-name">Nome</label>
  <input id="contact-name" type="text" placeholder="Digite seu nome" />

  <label for="contact-email">E-mail</label>
  <input id="contact-email" type="email" placeholder="voce@exemplo.com" />

  <label for="contact-message">Mensagem</label>
  <textarea id="contact-message" rows="4" placeholder="Escreva sua mensagem"></textarea>

  <label class="checkbox-row">
    <input type="checkbox" />
    Enviar uma cópia para mim
  </label>

  <div class="button-row">
    <button type="button">Enviar</button>
    <button type="button" disabled>Desabilitado</button>
  </div>
</form>

<style>
  .contact-form {
    max-width: 360px;
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #f9fafb;
    font-family: Arial, sans-serif;
  }

  .contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #111827;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }

  .contact-form textarea {
    resize: vertical;
  }

  .contact-form .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    font-weight: normal;
  }

  .contact-form .checkbox-row input {
    accent-color: #2563eb;
  }

  .button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .button-row button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font: inherit;
    cursor: pointer;
  }

  .button-row button:hover:not(:disabled) {
    background-color: #1d4ed8;
  }

  .button-row button:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
  }

  .button-row button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }
</style>

O formulário usa espaçamento consistente, estados de foco visíveis e estados de botão claros.

Erros comuns de iniciantes

  • Remover contornos de foco sem substituição: usuários de teclado precisam ver qual campo está ativo.
  • Esquecer de conectar labels: use valores for e id correspondentes, ou envolva o input dentro do label.
  • Usar placeholders no lugar de labels: placeholders desaparecem quando o usuário digita.
  • Esquecer box-sizing: border-box: inputs com width: 100% e padding podem sair do contêiner.
  • Estilizar demais checkboxes cedo demais: comece com espaçamento e accent-color antes de criar controles personalizados.

Mini tarefa prática

Veja esta regra CSS:

Somente leitura

O que box-sizing: border-box; ajuda a evitar neste input?

Confira as respostas do quiz quando estiver pronto.

Quiz curto com respostas

  1. Qual atributo do label conecta um label ao input correspondente?
  2. Qual pseudo-classe estiliza um campo quando o usuário clica nele ou chega até ele com Tab?
  3. Por que você deve evitar usar placeholder text como o único label?

Respostas:

  1. O atributo for.
  2. :focus.
  3. Porque o placeholder desaparece quando o usuário começa a digitar, e não é um bom substituto para um label real.

Resposta da mini tarefa prática: ele mantém o padding dentro da largura 100%, então o input tem menos chance de sair do contêiner.

Pequeno desafio

Estilize o formulário de comentário abaixo.

Seus objetivos:

  • Faça o <textarea> ocupar toda a largura com 10px de padding.
  • Adicione um estado :focus visível que mude a cor da borda do textarea.
  • Faça o botão ser um bloco de largura total com fundo preto e texto branco.
  • Adicione um estado :hover que mude o fundo do botão para cinza escuro.
  • Adicione um estilo :focus-visible claro para o botão.
Editável
<form class="challenge-form">
  <label for="message">Sua mensagem</label>
  <textarea id="message" rows="4" placeholder="Escreva sua mensagem"></textarea>

  <button class="action-button" type="button">Enviar mensagem</button>
</form>

<style>
  .challenge-form {
    max-width: 320px;
    font-family: Arial, sans-serif;
  }

  .challenge-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }

  #message {
    box-sizing: border-box;
    margin-bottom: 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
    /* Adicione width e padding */
  }

  #message:focus {
    /* Adicione uma cor de borda e um outline */
  }

  .action-button {
    /* Adicione layout e cores do botão */
  }

  .action-button:hover {
    /* Adicione cor de fundo no hover */
  }

  .action-button:focus-visible {
    /* Adicione um outline visível para foco de teclado */
  }
</style>

Resumo

  • Formulários coletam entrada do usuário.
  • Labels explicam campos e devem ser conectados com for e id.
  • Inputs de texto geralmente precisam de largura, padding, borda, border radius e estilos de fonte.
  • Placeholder é uma dica, não um substituto para um label.
  • Estados de foco mostram qual campo está ativo.
  • Para iniciantes, é melhor manter checkboxes nativos simples.
  • Botões devem ter estados claros: normal, hover, foco e desabilitado.
  • Estilos padrão do navegador são úteis, mas CSS personalizado torna os formulários mais consistentes.