Como estilizar formulários com CSS: um guia para iniciantes

Os aplicativos coletam dados principalmente por meio de formulários. Pegue um formulário de inscrição genérico, por exemplo: há vários campos para os usuários inserirem informações como nome, e-mail, etc.

Antigamente, os sites só tinham formulários HTML simples e enfadonhos com sem estilos. Isso foi antes de o CSS mudar tudo. Agora podemos criar formulários mais interessantes e dinâmicos usando os recursos mais recentes do CSS.

Não acredite apenas na minha palavra. Abaixo está a aparência de um formulário HTML típico sem CSS.

Aqui está o mesmo formulário aprimorado com um pouco de CSS .

Neste tutorial, mostraremos como recriar a forma mostrada acima, bem como alguns outros modificações que você pode implementar para criar formulários visualmente impressionantes e fáceis de usar.

Vamos demonstrar como estilizar formulários com CSS em seis etapas:

1. Configuração box-sizing
2. Seletores CSS para elementos de entrada
3. Métodos básicos de estilização para campos de entrada de texto
4. Estilo de outros tipos de entrada
5. Pseudo classes de IU
6. Entradas não personalizáveis

Antes de mergulharmos, é importante entender que não há um estilo específico para formulários. As possibilidades são limitadas apenas por sua imaginação. Este guia tem como objetivo ajudá-lo a começar a criar seus próprios designs exclusivos com CSS.

Vamos começar!

Configurando o tamanho da caixa

Normalmente defino * {box-sizing:border-box;} não apenas para formulários, mas também para páginas da web. Ao defini-lo, a largura de todos os elementos conterá o preenchimento.

Por exemplo, defina a largura e o preenchimento da seguinte forma.

.some-class { width:200px; padding:20px;}

O .some-class sem box-sizing:border-box terá uma largura de mais de 200px, que pode ser um problema. É por isso que a maioria dos desenvolvedores usa border-box para todos os elementos.

Abaixo está uma versão melhor do código. Ele também oferece suporte aos :before e :after pseudo-elementos.

*, *:before, *:after { box-sizing: border-box;}

Dica: O seletor * seleciona todos os elementos no documento.

Seletores CSS para elementos de entrada

A maneira mais fácil de selecionar os elementos de entrada devem usar seletores de atributo CSS.

Esses seletores irão selecionar todos os elementos de entrada no documento. Se precisar especificar qualquer seletor, você precisará adicionar classes aos elementos.

<input type="text" class="signup-text-input" />

Então:

.signup-text-input { // styles here}

Métodos básicos de estilo para campos de entrada de texto de linha única

Os campos de linha única são os campos de entrada mais comuns usados em formulários. Normalmente, uma entrada de texto de linha única é uma caixa simples com uma borda (isso depende do navegador).

Aqui está a marcação HTML para um campo de linha única com um espaço reservado.

<input type="text" placeholder="Name" />

Será parecido com isto:

Você pode usar o seguinte Propriedades CSS para tornar este campo de entrada mais atraente.

• Preenchimento (para adicionar espaçamento interno)
• Margem (para adicionar uma margem ao redor do campo de entrada)
• Borda
• Sombra da caixa
• Raio da borda
• Largura
• Fonte

Vamos ampliar em cada uma dessas propriedades.

Preenchimento

Adicionar algum espaço interno ao campo de entrada pode ajudar a melhorar a clareza. Você pode fazer isso com a propriedade padding.

input { padding: 10px;}

Margem

Se houver outros elementos próximos ao seu campo de entrada, você pode adicionar uma margem ao redor dele para evitar o agrupamento.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Borda

Na maioria dos navegadores, os campos de entrada de texto têm bordas, que você pode personalizar.

.border-customized-input { border: 2px solid #eee;}

Você também pode remover uma borda.

.border-removed-input { border: 0;}

Dica: certifique-se para adicionar uma cor de fundo ou box-shadow quando a borda for removida. Caso contrário, os usuários não verão a entrada.

Alguns web designers preferem exibir apenas a borda inferior porque é como escrever em uma linha em um caderno.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Sombra de caixa

Você pode usar a propriedade CSS box-shadow para adicionar uma sombra. Você pode obter uma variedade de efeitos brincando com os cinco valores da propriedade.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Raio da borda

A propriedade border-radius pode ter um impacto enorme na sensação de seus formulários. Curvando as bordas das caixas, você pode alterar significativamente a aparência dos campos de entrada.

.rounded-input { padding:10px; border-radius:10px;}

Você pode obter uma aparência totalmente diferente usando box-shadow e border-radius juntos.

Largura

Use a propriedade width para defina a largura das entradas.

input { width:100%;}

Fontes

A maioria dos navegadores usa uma família de fontes e tamanhos diferentes para os elementos do formulário. Se necessário, podemos herdar a fonte do documento.

input, textarea { font-family:inherit; font-size: inherit;}

Estilizando outros tipos de entrada

Você pode estilizar outros tipos de entrada, como área de texto, botão de opção, caixa de seleção e muito mais. Vamos dar uma olhada mais de perto.

Áreas de texto

As áreas de texto são semelhantes às entradas de texto, exceto que permitem entradas de várias linhas. Você normalmente os usa quando deseja coletar dados de formato mais longo dos usuários, como comentários, mensagens, etc. Você pode usar todas as propriedades CSS básicas que discutimos anteriormente para definir o estilo de áreas de texto.

O A propriedade resize também é muito útil em áreas de texto. Na maioria dos navegadores, as áreas de texto são redimensionáveis ao longo dos eixos xey (valor: both) por padrão. Você pode configurá-lo para both, horizontal ou vertical.

Verifique esta área de texto que eu estilizei:

Veja a Caneta
dyomzez de Supun Kavinda (@SupunKavinda)
no CodePen.

Neste exemplo, usei resize:vertical para permitir apenas o redimensionamento vertical. Esta prática é usada na maioria das formas porque evita barras de rolagem horizontais irritantes.

Nota: Se você precisar criar áreas de texto de redimensionamento automático, você precisará usar uma abordagem JavaScript, que está fora do escopo de este artigo.

Caixas de seleção e botões de opção

A caixa de seleção e os botões de opção padrão são difíceis de estilizar e requerem CSS (e HTML) mais complexos.

Para estilizar uma caixa de seleção, use o seguinte código HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Algumas coisas a serem observadas:

• Já que estamos usando <label> para envolver o <input>, se você clicar em qualquer elemento dentro de <``label``>, o <input> será clicado
• Ocultaremos <input> porque os navegadores não permitem que o modifiquemos muito
• <span> cria uma caixa de seleção personalizada
• Usaremos o input:checked seletor de pseudo classe para obter o status verificado e o estilo da caixa de seleção personalizada

Aqui está uma caixa de seleção personalizada (consulte os comentários no CSS para obter mais explicações):

Veja a Caneta
yLNKQBo de Supun Kavinda ( @SupunKavinda)
na CodePen.

Aqui está um botão de opção personalizado:

Veja a caneta
eYNMQNM de Supun Kavinda (@SupunKavinda)
no CodePen.

Usamos o mesmo conceito (input:checked) para criar elementos personalizados em ambos os exemplos.

Em navegadores, as caixas de seleção são em forma de caixa enquanto os botões de opção são redondos. É melhor manter essa convenção nas entradas personalizadas para evitar confundir o usuário.

Selecionar menus

Os menus de seleção permitem que os usuários selecionem um item de várias escolhas.

Você pode estilizar o elemento <select> para parecer mais envolvente.

select { width: 100%; padding:10px; border-radius:10px;}

No entanto, você não pode estilizar o menu suspenso (ou os elementos <option>) porque eles são estilizados por padrão dependendo do sistema operacional. A única forma de definir o estilo desses elementos é usar menus suspensos personalizados com JavaScript.

Botões

Como a maioria dos elementos, os botões têm estilos padrão.

<button>Click Me</button>

Vamos incrementar um pouco.

Pseudo-classes de IU

Abaixo estão algumas pseudo-classes de IU que são comumente usadas com elementos de formulário.

Elas podem ser usadas para mostrar avisos com base nos atributos de um elemento:

• :required
• :valid e :invalid
• :checked (já usamos isso)

Eles podem ser usados para criar efeitos em cada estado:

• :hover
• :focus
• :active

Mensagens geradas com: obrigatório

Para mostrar uma mensagem de que a entrada é necessária:

Se você remover o com o atributo JavaScript, a "Required" mensagem será removida automaticamente.

Podemos fazer o mesmo com o :valid e :invalid pseudo classes.

: hover e: focus

:hover seleciona um elemento quando o ponteiro do mouse passa sobre ele. :focus seleciona um elemento quando ele está focado.

Essas pseudo-classes são frequentemente usadas para criar transições e pequenas mudanças visuais. Por exemplo, você pode alterar a largura, cor de fundo, cor da borda, intensidade da sombra, etc.Usar a propriedade transition com essas propriedades torna essas alterações muito mais suaves.

Aqui estão alguns efeitos de foco nos elementos do formulário (tente passar o mouse sobre os elementos).

Veja a caneta
yLNKZqg de Supun Kavinda (@SupunKavinda)
no CodePen.

Quando os usuários veem os elementos mudando sutilmente quando eles pairam sobre eles, têm a sensação de que o elemento é acionável. Esta é uma consideração importante ao projetar elementos de formulário.

Você notou que (em alguns navegadores) um contorno azul aparece ao focar em elementos de formulário? Você pode usar a :focus pseudoclasse para removê-la e adicionar mais efeitos quando o elemento estiver em foco.

O código a seguir remove o contorno de foco de todos os elementos.

*:focus {outline:none !important}

Para adicionar um esboço de foco:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Você viu entradas de pesquisa que escala quando focado? Tente esta entrada.

Veja a Caneta
KKpoJJa de Supun Kavinda (@SupunKavinda)
no CodePen.

Entradas não personalizáveis

O estilo dos elementos do formulário tem sido historicamente uma tarefa difícil. Existem alguns elementos de formulário que não temos muito controle sobre o estilo. Por exemplo:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Esses elementos são fornecidos pelo navegador e estilizados com base no sistema operacional. A única maneira de estilizar esses elementos é usar controles personalizados, que são criados usando elementos HTML estilizáveis, como div, span, etc.

Por exemplo, ao estilizar <input type="file">, podemos ocultar a entrada padrão e usar um botão personalizado.

Os controles personalizados para os elementos do formulário são desenvolvido para a maioria das principais bibliotecas JavaScript. Você pode encontrá-los no GitHub.

Conclusão

Agora você deve entender como estilizar elementos de formulário simples e como usar controles personalizados quando os campos de entrada do navegador são difíceis de estilizar. Como afirmei no início deste post, esses são apenas os blocos de construção básicos do estilo de formulário CSS. Você deve usar essas dicas como base para dar asas à imaginação.

Como dica final, lembre-se de tornar todos os seus formulários responsivos.

Procurando mais inspiração para o design de formulários? Verifique esta coleção CodePen.