Pseudo-classe :focus-visible CSS

Definição e uso

CSS :focus-visible O pseudo-classe é usado para aplicar estilos de foco apenas quando o foco é obtido através do teclado, não através do mouse.

Isso pode ser usado com :focus Usados em conjunto, criam estilos de foco diferentes para foco de teclado e foco de mouse/touch.

Exemplo

Escolha e defina o estilo do botão cujo foco é obtido através da tecla Tab do teclado:

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

Experimente você mesmo

Sintaxe CSS

:focus-visible {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o pseudo-classe.

Páginas relacionadas

Tutorial:Pseudo-classe CSS

Referência:Pseudo-classe :focus do CSS