Carregando...

Controles de formulário em CSS

Formulários são onde as pessoas digitam, escolhem e enviam. CSS pode tornar input, textarea e select mais claros e calmos — padding legível, bordas arrumadas e um sinal de foco que de fato se vê — enquanto o HTML mantém a semântica.

Um kit de controles de formulário

📊 Controles de formulário em um olhar

Peça Trabalho do dia a dia
input / textarea / select Os controles principais que você estiliza juntos
padding + border Dar espaço e uma borda clara aos campos
border-radius Suavizar cantos
:focus-visible Mostrar anel de foco para teclado/ponteiro
:disabled Atenuar campos que não podem ser editados agora

Estilize uma classe compartilhada (ou grupo de elementos) uma vez para cada campo parecer da mesma família. A pele dos botões fica para a próxima lição.

Inputs de texto — espaço e bordas

Inputs padrão do navegador costumam parecer desiguais entre dispositivos. Defina largura, padding, tamanho de fonte e uma borda leve para digitar com conforto.

Input de texto base

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — espaço para escrever

Textareas precisam de altura e da mesma linguagem de padding dos inputs. Permita resize vertical se esperar respostas longas; trave se o layout precisar ficar fixo.

Textarea confortável

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — a mesma família

Dropdowns devem compartilhar borda, raio e padding com campos de texto para o formulário não parecer remendado.

Select na mesma família

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Foco que se vê

Nunca remova estilos de foco sem substituto. :focus-visible desenha um anel claro para teclado e mantém o visual calmo.

Anel de foco visível

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Campos desabilitados

Controles disabled devem parecer indisponíveis — menor opacidade ou fundo apagado — sem sumir do layout.

Tom disabled

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Um hábito calmo de campos

Mantenha um estilo de campo compartilhado, respeite o espaço do rótulo, preserve o foco e deixe a cosmética do botão para a lição Buttons.

Classe de campo compartilhada

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Experimente você

  1. Estilize inputs texto/e-mail com padding, border e border-radius.
  2. Combine um textarea; defina resize: vertical.
  3. Estilize um select com a mesma família de borda.
  4. Adicione outline :focus-visible + cor da borda — não deixe outline: none nu.
  5. Atenue um input :disabled e confira se ainda se lê como campo.

Erros comuns

  • outline: none sem substituto de foco (usuários de teclado se perdem)
  • Padding/fonte minúsculos que tornam a digitação no celular dolorosa
  • Estilizar cada controle diferente para o formulário parecer aleatório
  • Transformar esta lição em design de botões (isso é o próximo)
  • Misturar com border-collapse / zebra de tabelas (sessão anterior)

Resumo

  • Padding, borda e raio compartilhados unificam inputs, textareas e selects
  • Dê altura e resize sensato às textareas
  • Mantenha um sinal :focus-visible visível
  • Atenue campos :disabled; não os esconda
  • Deixe a cosmética de botões para a próxima lição

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 33 de 35
Css Tutorial