Pseudo-classe CSS :focus
A pseudo-classe CSS :focus seleciona os elementos que estão em foco. Saiba mais sobre a pseudo-classe e pratique com os exemplos.
A pseudo-classe :focus seleciona e aplica estilos a elementos que recebem o foco do utilizador.
Elementos como <input>, <button> e <textarea> podem receber o foco através da tecla Tab do teclado ou clicando. Os elementos não interativos também podem receber o foco do teclado se incluírem um atributo tabindex="0".
Considerações de acessibilidade
O indicador visual de foco deve ser acessível a todos os utilizadores. De acordo com as WCAG 2.1 SC 2.4.7 Focus Visible, o indicador de foco tem de ser claramente visível e manter um rácio de contraste de, pelo menos, 3:1 em relação às cores adjacentes.
Ao remover o outline de foco predefinido, substitua-o sempre por um indicador personalizado que cumpra os requisitos das WCAG 2.1 SC 2.4.7.
Para uma melhor experiência de utilização, considere utilizar a pseudo-classe :focus-visible em vez de :focus. Aplica estilos apenas quando o elemento recebe o foco através do teclado, evitando alterações visuais desnecessárias quando se utiliza o rato ou o toque.
Pseudo-classe CSS :focus
:focus {
outline: none;
}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>