: foco visível - CSS-Tricks | CSS Almanac 2025

A :focus-visiblepseudoclasse (também conhecida como pseudoclasse “Indicada por Foco”) é uma maneira CSS nativa de estilizar elementos que:

Estão em foco
Precisa de um indicador visível para mostrar o foco (mais sobre isso mais tarde)

:focus-visibleé usado de forma semelhante a :focus: para chamar a atenção para o elemento que atualmente está em foco.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblefaz parte do rascunho de trabalho dos seletores CSS4. Antes da adoção, a Mozilla introduziu a :-moz-focusringpseudo-classe para trazer a funcionalidade para o Firefox antes de uma especificação formal.

Por que precisamos: foco visível?

Já não :focusfaz isso? Sim, mas existem problemas. A ilustração mais clara é um botão que dispara algum JavaScript. Imagine um carrossel de imagens com botões para alternar entre as imagens. Digamos que você adicionou um tabindexaos botões para que possam ser selecionados com um teclado, mas quando for testar o carrossel com o mouse, verá este contorno ao redor do seu lindo botão:

Contorno adicionado pelo navegador em `:focus`

Não que você queira fazer isso (por questões de acessibilidade), mas como você se livra disso? Definindo a :focuspseudo-classe:

.next-image-button:focus ( outline: none; )

Agora, seu botão parece ótimo quando está em foco, mas o que acontece quando um usuário acessa seu botão sem o mouse, mas com o teclado? Eles não podem ver onde eles passaram! Isso é um problema porque agora não há como saber qual botão está focado nas ações do teclado:

Um deles está focado, mas você não consegue ver!

Existe uma maneira de remover o contorno do foco azul, mas ainda mostrar um foco que está mais de acordo com o design do site? Claro, você pode ter seu bolo e comê-lo também, graças a :focus-visible!

:focus-visiblesó se aplica quando você realmente deseja um indicador visual para ajudar o usuário a ver onde está o foco. Em outras palavras, ele não pode esconder o contorno como :focuspode. (Bem, poderia ser misturado ao design, mas tanto faz.) Os dois devem ser usados juntos nesse sentido. Vamos adicionar um ao nosso botão:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Agora, quando o teclado for usado para acessar o botão, haverá uma indicação visual do foco:

Como os navegadores determinam quando algo está: visível no foco?

Os navegadores têm um pouco de liberdade para determinar quando este pseudo-seletor deve ser aplicado a um determinado elemento usando suas próprias heurísticas. Primeiro, vamos dar uma olhada no rascunho de trabalho do CSS4 e depois tentar dividi-lo. Das especificações:

Se um usuário expressou uma preferência (como por meio de uma preferência do sistema ou uma configuração do navegador) para sempre ver um indicador de foco visível, o agente do usuário deve honrar isso, tendo: foco-visível sempre corresponde ao elemento ativo, independentemente de qualquer outro fatores. (Outra opção pode ser o agente do usuário mostrar seu próprio indicador de foco, independentemente dos estilos do autor.)

Qualquer elemento que suporte entrada de teclado (como um elemento de entrada ou qualquer outro elemento que pode acionar um teclado virtual a ser mostrado em foco se um teclado físico não estiver presente) deve sempre corresponder a: foco-visível quando em foco.

Se o usuário interagir com a página por meio do teclado, o elemento atualmente em foco deve corresponder a: focus-visible (ou seja, o uso do teclado pode mudar se esta pseudo classe combina, mesmo que não afete: focus).

Se o usuário interagir com a página por meio de um dispositivo apontador, de modo que o foco seja movido para um novo elemento que não suporta a entrada do usuário, o elemento recém-focado não deve corresponder: focus-visible.

Se o elemento ativo corresponder a: focus-visible e um script fizer com que o foco se mova para outro lugar, o elemento recém-focado deve corresponder a: focus-visible.

Por outro lado, se o elemento ativo não corresponder a: focus-visible e um script fizer com que o foco se mova para outro lugar, o elemento recém-focado não deve corresponder a: focus-visible.

Se isso é um pouco abstrato, aqui está uma interpretação:

Situação	O: focus-visible se aplica?
O usuário diz que sempre deseja que o foco seja visível por meio de uma configuração	sim
Um elemento precisa de um teclado para funcionar (como texto)	sim
O usuário está navegando com um teclado	sim
O usuário está navegando com um dispositivo apontador (como um mouse ou dedo em uma tela sensível ao toque)	Não
Um script faz com que o foco se mova de um `:focus-visible`elemento para outro elemento	sim
Um script faz com que o foco se mova de um não `:focus-visible`elemento para outro elemento	Não

Vale a pena repetir: essas são diretrizes e os navegadores serão capazes de fazer sua própria determinação sobre o que é selecionado por :focus-visible. Podemos esperar que o caso óbvio de navegação com teclado seja tratado de forma previsível, mas os navegadores têm a capacidade de fazer a determinação eles mesmos, como qualquer outro recurso.

Suporte de navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.