Como definir o estilo de controles de formulário

Neste módulo, você vai aprender a definir o estilo dos controles de formulário e a combinar com outros estilos do site.

Ajudar os usuários a selecionar uma opção

O elemento <select>

Os estilos padrão de um elemento <select> não têm uma ótima aparência, e a aparência é inconsistente entre os navegadores.

Primeiro, vamos alterar as setas. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Para remover as setas padrão de um elemento <select>, use a propriedade CSS appearance. Para mostrar a seta de sua escolha, defina-a como uma background.

Mude também o font-size para pelo menos 1rem (que na maioria dos navegadores tem um valor padrão de 16 px) para seu elemento <select>. Isso impede o zoom de página no Safari do iOS quando o controle de formulário está em foco.

Também é possível mudar as cores do elemento para combinar com as cores da sua marca. Depois de adicionar mais alguns estilos para espaçamento, :hover e :focus, a aparência do elemento <select> agora é consistente entre navegadores.

Confira isso na demonstração a seguir de Styling a Select Like It’s 2019

E o elemento <option>? O <option> é um chamado elemento substituído, que tem uma representação fora do escopo do CSS. No momento, não é possível definir o estilo do elemento <option>.

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

A aparência de <input type="checkbox"> e <input type="radio"> varia de acordo com o navegador.

Abra a demonstração em vários navegadores para ver a diferença. Vamos aprender como garantir que as caixas de seleção e os botões de opção correspondam à sua marca e tenham a mesma aparência em vários navegadores.

Antes, os desenvolvedores não podiam definir o estilo dos controles <input type="checkbox"> e <input type="radio"> diretamente. Agora as caixas de seleção e os botões de opção podem ser estilizados com os pseudoelementos. Ou a técnica de substituição a seguir pode ser usada para criar estilos personalizados para esses elementos.

Primeiro, oculte a caixa de seleção e o botão de opção padrão visualmente.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

É importante usar position: absolute em combinação com opacity: 0 em vez de display: none ou visibility: hidden para que os controles fiquem apenas visualmente ocultos. Isso garante que eles ainda sejam expostos pela árvore de acessibilidade do navegador. Talvez seja necessário aplicar mais estilos para garantir que os controles de formulário visualmente ocultos permaneçam posicionados "por cima" dos elementos substitutos. Isso ajuda a garantir que o cursor sobre um desses elementos, quando um leitor de tela estiver ativado ou ao usar dispositivos touchscreen com leitores de tela ativados, os controles visualmente ocultos sejam detectáveis ao usar o toque. Além disso, o indicador de foco visível do leitor de tela geralmente aparece no local em que os controles são renderizados na tela.

Você tem diferentes opções para mostrar as caixas de seleção e os botões de opção personalizados. Use o pseudoelemento CSS ::before e a propriedade background do CSS ou imagens SVG inline. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Há muitas possibilidades com o CSS para garantir que as caixas de seleção e os botões de opção correspondam aos estilos da sua marca.

Saiba mais sobre como estilizar <input type="checkbox"> e <input type="radio"> e sobre os estilos personalizados de caixas de seleção.

Como usar as cores do seu site para controles de formulários

Você quer levar os estilos do seu site para os controles de formulário com uma linha de código? Você pode usar a propriedade CSS accent-color para fazer isso.

checkbox {
  accent-color: orange;
}

Teste seu conhecimento

Teste seus conhecimentos sobre como estilizar controles de formulários

Como remover o estilo nativo da plataforma dos controles de formulário?

Uso de revert: all;.
Tente de novo.
Uso de appearance: none;.
🎉
Uso de appearance: revert;.
Tente de novo.
Uso de revert: appearance;.
Tente de novo.

Recursos