Estilos de enfoque solo para teclado en navegadores modernos

En los navegadores modernos, la pseudoclase :focus-visible se puede utilizar para lograr teclado- sólo estilos de enfoque. Esta pseudoclase coincide con elementos enfocados cuando el usuario interactúa con la página a través de un teclado u otro dispositivo que no apunta, lo que indica enfoque cuando ayuda al usuario. Como resultado, los anillos de enfoque se suprimen cuando un usuario interactúa haciendo clic o tocando.

Estilo de enfoque personalizado con :focus-visible

Para implementar estilos de enfoque personalizados mientras se conservan compatibilidad con navegadores más antiguos, siga este enfoque:

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

En los navegadores que admiten :focus-visible, la segunda regla anula los estilos de enfoque definidos en la primera regla cuando :focus-visible está inactivo. Esto garantiza que los estilos de enfoque solo se apliquen cuando :focus-visible esté activo.

Solución original para navegadores antiguos

Para navegadores que no admiten :focus-visible, un enfoque alternativo implica el uso de un elemento adicional dentro de cada elemento enfocable, como se propone en el artículo de Roman Komarov:

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

Al colocar los estilos de enfoque en un elemento interno, mientras se eliminan los contornos predeterminados tanto en el elemento principal como en el interior después de agregar el estilo de enfoque personalizado, solo las interacciones del teclado aplican estilos de enfoque al elemento visible principal.