CSS :focus Pseudo Classe
A pseudo-classe CSS :focus seleciona elementos focados. Saiba mais sobre ela e pratique com exemplos.
A pseudo-classe :focus seleciona e estiliza um elemento enquanto ele está focado — ou seja, enquanto é o elemento atualmente definido para receber entrada do teclado.
Apenas um elemento por página pode ter o foco de cada vez. Controles de formulário como <input>, <button>, <textarea> e links podem receber foco ao pressionar Tab no teclado ou ao clicar. Elementos não interativos (como um <div>) também podem se tornar focalizáveis se você adicionar o atributo tabindex="0".
Esta página explica como o :focus funciona, por que você quase nunca deve remover o indicador de foco sem um substituto, e as pseudo-classes relacionadas :focus-visible e :focus-within que resolvem problemas comuns que o :focus sozinho não consegue.
Como funciona a estilização de foco
Quando um elemento recebe o foco, o navegador aplica um outline padrão para que os usuários de teclado possam ver onde estão. A regra :focus permite substituir ou aprimorar esse indicador:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus é uma pseudo-classe dinâmica: os estilos são aplicados apenas enquanto o elemento está focado e são removidos no momento em que o foco se move para outro lugar (por exemplo, quando o usuário pressiona Tab para o próximo campo).
Preocupações com Acessibilidade
O indicador visual de foco deve ser acessível a todos os usuários. De acordo com o WCAG 2.1 SC 2.4.7 Focus Visible, o indicador de foco deve ser claramente visível e manter uma relação de contraste de pelo menos 3:1 em relação às cores adjacentes.
Um erro comum é remover o outline completamente por uma aparência "mais limpa":
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Se você remover o outline padrão, sempre substitua-o por um indicador personalizado (uma borda visível, box-shadow ou alteração de plano de fundo) que atenda ao requisito de contraste 3:1:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
O :focus simples é acionado em ambos os cliques do mouse e na navegação por teclado com Tab. Isso significa que clicar em um botão pode deixar um anel de foco visível após o clique — visualmente ruidoso para usuários de mouse, mas essencial para usuários de teclado.
A pseudo-classe :focus-visible resolve isso: o navegador só a corresponde quando decide que um indicador visível é genuinamente útil, geralmente na navegação por teclado. O padrão recomendado é manter uma dica sutil para todos e um anel forte apenas para :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within corresponde a um elemento quando ele ou qualquer um dos seus descendentes está focado. É útil para destacar um grupo de formulário inteiro, card ou dropdown quando um de seus inputs está ativo:
.field:focus-within {
border-color: #2563eb;
}Versão
Sintaxe
Exemplo de sintaxe CSS :focus
:focus {
css declarations;
}Exemplo do seletor :focus:
Exemplo de código CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Exemplo do seletor :focus com a tag <label>:
Outro exemplo de código CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Pseudo-classes relacionadas
:focus é uma das diversas pseudo-classes dinâmicas que respondem à interação do usuário. Explore as demais:
:hover— estiliza um elemento enquanto o ponteiro está sobre ele.:active— estiliza um elemento enquanto ele está sendo ativado (no momento de um clique).outline— a propriedade mais utilizada para construir um indicador de foco personalizado.