Pseudo-clase :focus-visible de CSS

Definición y uso

CSS :focus-visible Los pseudo-clases se utilizan para aplicar estilos de enfoque solo cuando se enfoca a través del teclado, no a través del ratón.

Esto puede combinarse con :focus Al combinarlos, crear diferentes estilos de enfoque para el enfoque de teclado y el enfoque de ratón/tocado.

Ejemplo

Elegir y establecer el estilo de los botones que obtienen el enfoque a través de la tecla Tab del teclado:

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

Prueba por ti mismo

Sintaxis CSS

:focus-visible {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Las cifras en la tabla indican la versión del navegador que admite completamente el pseudo-clase.

Páginas relacionadas

Tutoriales:Pseudo-clases de CSS

Referencia:Pseudo-clase :focus de CSS