Como definir o estilo de formulários

Ajude os usuários a usar o formulário com o navegador que preferirem

Para garantir que seu formulário seja acessível ao maior número possível de pessoas, use os elementos criados para o job: <input>, <textarea>, <select> e <button>. Essa é a linha de base para um formulário utilizável.

Os estilos padrão do navegador não estão muito bons! Vamos mudar isso.

Garantir que os controles de formulário sejam legíveis para todos

O tamanho de fonte padrão para controles de formulário na maioria dos navegadores é muito pequeno. Para garantir que os controles do formulário sejam legíveis, altere o tamanho da fonte com CSS:

Aumente a font-size e a line-height para melhorar a legibilidade.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Ajudar os usuários a navegar pelo formulário

A próxima etapa é alterar o layout do formulário e aumentar o espaçamento dos elementos. para ajudar os usuários a entender quais elementos estão juntos.

A propriedade CSS margin aumenta o espaço entre os elementos, e a propriedade padding aumenta o espaço em torno do conteúdo do elemento.

Para o layout geral, use Flexbox ou Grade. Saiba mais sobre os métodos de layout CSS.

Garantir que os controles de formulário se pareçam com os controles de formulário

Facilite o preenchimento do seu formulário usando estilos bem compreendidos para seus controles de formulário. Por exemplo, defina o estilo dos elementos <input> com uma borda sólida.

input,
textarea {
  border: 1px solid;
}

Ajudar os usuários a enviar o formulário

Use um background na <button> de acordo com o estilo do site. e substituir ou remover os estilos border padrão.

Ajudar os usuários a entender o estado atual

Os navegadores aplicam um estilo padrão para :focus. Você pode modificar os estilos de :focus para corresponder à cor da sua marca.

button:focus {
    outline: 4px solid green;
}

Teste seu conhecimento

Teste seus conhecimentos sobre a estilização de formulários

Recursos

• Conheça o CSS
• Métodos de layout CSS
• Como criar indicadores de foco
• Como reverter o estilo padrão de uma <button>.