Durante muito tempo eu achei que não fosse possível estilizar checkboxes e radio buttons nativos sem recorrer a alguma pirueta criativa, como fazem as famosas bibliotecas de componentes Material UI, Ant Design e VuetifyJS. Mas adivinha só, é totalmente possível.

Checkboxes e Radio Buttons podem ser personalizados facilmente sem truques.

Aqui estão os três passos para deixar um checkbox nativo com aparência bacana e consistente nos navegadores mais utilizados atualmente (Chrome, Safari, Edge e Firefox).

Remova a aparência padrão

A primeira coisa a ser feita é remover a aparência padrão gerenciada pelo navegador:

input[type=checkbox] {
  appearance: none;
}

Atribua o visual personalizado

Estilize o input da maneira como desejar. Lembre-se dos estados não selecionado, selecionado, foco e desabilitado. Exemplo:

input[type=checkbox] {
  margin: 5px 6px 5px 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #C6C6C6;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0 0 0 #CDE6FE;
  appearance: none;
  outline: 0;
  transition-property: box-shadow, border-color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

input[type=checkbox]:focus,
input[type=checkbox]:active {
  box-shadow: 0 0 0 4px #CDE6FE;
  border-color: #3A80EC;
}

input[type=checkbox]:checked {
  background-color: #6699FF;
  background-size: 12px 12px;
  background-position: center center;
  background-repeat: no-repeat;
}

input[type=checkbox]:checked:not(:disabled) {
  border-color: #6699FF;
}

input[type=checkbox]:disabled {
  background-color: #C6C6C6;
}

Defina uma marcador

Por fim, crie um ícone svg para o marcador usado no estado selecionado e utilize-o em sua folha de estilo como URL em base64:

input[type=checkbox]:checked {
  background-color: #6699FF;
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTEuNiwyLjNsLTYuOCw4LjhjMCwwLS4xLjItLjMuMnMtLjIsMC0uMy0uMVMuNCw3LjQuNCw3LjRoMGMwLS4xLDAtLjIsMC0uMnMwLS4xLDAtLjJjMCwwLDAsMCwwLDAsLjQtLjQsMS4xLTEuMiwxLjItMS4zLDAsMCwuMS0uMS4yLS4xcy4yLjEuMy4yYzAsMCwyLjIsMi4xLDIuMiwyLjFMOS44LjhzLjEsMCwuMiwwLC4xLDAsLjIsMGwxLjUsMS4yczAsLjEsMCwuMmMwLDAsMCwuMSwwLC4yWiIvPjwvc3ZnPgo=');
  background-size: 12px 12px;
  background-position: center center;
  background-repeat: no-repeat;
}

Prontinho! Zero truques e peripécias. Mais do que isso, o checkbox continua respeitando rigorosamente todos os requisitos de acessibilidade, como navegação/seleção via teclado, além de continuar com seu role checkbox, que facilitará sua vida ao testar sua interface gráfica usando a Testing Library. E para estilizar um Radio Button nativo, os passos são exatamente os mesmos.

Compatibilidade

Mão na massa: Neste Gist você encontrará em um único arquivo HTML, todo o código necessário usado no vídeo apresentado neste post.

Saiba mais: Se você curtiu este post, talvez possa querer saber como estilizar elementos com múltiplas bordas usando apenas CSS.