Como editar o focus com CSS

A pseudo-class :focus do css é aplicada quando o usuário clica com o mouse ou usa o teclado, um exemplo é um botão ou um formulário.

Resetar o focus do seu site pode ser muito prejudicial para acessibilidade do mesmo, pois dificulta para usuários com necessidades especiais, pois evita que os elementos seja identificados por leitores de páginas.

Neste post vamos ensinar a editar o foco, diferenciando ele do teclado e do mouse, sem remove-lo completamente do projeto.

Confira o vídeo do exemplo:

Exemplo comum de como editar o foco:

button:focus {
     border: 1px solid red;
}

No caso acima adicionamos uma borda de 1px solida e com a cor vermelha quando o elemento button estiver focado.

Exemplo de como deixar o focus ativo apenas usando o teclado usando a tecla TAB.

button:focus {
  outline: none;
}
button:focus-visible {
  outline: 3px solid red;
}

Acima, removemos o outline que é o foco padrão dos navegadores para o foco com o mouse e adicionamos um outline com 3px solido na cor vermelha para uso com telado.

Abaixo vamos usar um estilo para o teclado e outro para o mouse.

/* Focar o botão com um teclado mostrará uma linha VERMELHA tracejada. */
button:focus-visible {
  outline: 5px dashed #F00;
}
/* Focar o botão com um mouse, toque ou caneta mostrará borda AMARELA solida.*/
button:focus:not(:focus-visible) {
  outline: none;
  border: 5px solid #FFD600;
}

Acima quando o usuário usar o mouse o focus ficará com uma borda amarela e solida com 5px de espessura, e quando usar o teclado o focus ficará com uma borda tracejada com espessura de 5px e cor vermelha.

Exemplo:

See the Pen Focus e focus-visible by Cupcom Codes (@cupcomcodes) on CodePen.

Espero ter ajudado 🙂