Como definir o estilo de controles de formulário

Neste módulo, você vai aprender a estilizar controles de formulário e combinar outros estilos de site.

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

O elemento <select>

Os estilos padrão de um elemento <select> não têm um bom visual, 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>, faça o seguinte: use a propriedade de CSS appearance. Para mostrar a seta de sua preferência, defina-a como uma background.

Também é necessário mudar a font-size para pelo menos 1rem. (que, para a maioria dos navegadores, tem um valor padrão de 16 px) para seu elemento <select>. Isso impedirá que o zoom de página no Safari do iOS quando o controle de formulário estiver em foco.

Também é possível alterar 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 os navegadores.

Veja isso na demonstração a seguir Adaptando um vídeo do tipo "como se fosse 2019"

E o elemento <option>? O elemento <option> é chamado elemento substituído cuja representação está fora do escopo do CSS. No momento, não era possível definir o estilo do elemento <option>.

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

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

Abra a demonstração em vários navegadores para conferir a diferença. Vamos aprender a verificar se as caixas de seleção e os botões de opção correspondem à sua marca e são exibidos no mesmo navegador.

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 pelos próprios 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 padrão e o botão de opção.

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 escondidos apenas visualmente. Isso assegura que eles ainda sejam expostos pelo árvore de acessibilidade. Observe que podem ser necessários mais estilos para garantir que os elementos visualmente oculto controles de formulário permanecem posicionados "na parte superior" dos elementos de substituição. Isso ajudará a garantir que passar o cursor sobre um desses elementos, quando um leitor de tela estiver ativado ou ao usar dispositivos de toque com leitores de tela ativados, os controles visualmente ocultos serão detectável pelo toque, e o indicador de foco visível do leitor de tela geralmente aparece no local onde os controles são renderizados na tela.

Você tem diferentes opções para mostrar suas caixas de seleção e botões de opção personalizados. Use o pseudoelemento CSS ::before e a propriedade CSS background ou use 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;
}

Existem inúmeras 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 definir o estilo de <input type="checkbox"> e <input type="radio"> e estilos personalizados de caixas de seleção.

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

Quer implementar controles com os estilos do site usando apenas 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 os estilos de controles de formulários

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

Como usar revert: all;.
Tente novamente.
Como usar appearance: none;.
🎉
Como usar appearance: revert;.
Tente novamente.
Como usar revert: appearance;.
Tente novamente.

Recursos