:focus
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
Resumo
A pseudo-classe :focus do CSS é aplicada quando um elemento recebe foco, o que pode ocorrer quando o usuário seleciona o elemento utilizando o teclado ou ativando o mesmo com o mouse (ex: um campo de um formulário).
A pseudo classe é aplicada apenas ao elemento focado, e não aos seus elementos ascendentes, como ocorre com :checked e :enabled e diferentemente de :active ou :hover.
Sintaxe
elemento:focus { ... }
Exemplos
css
.nome:focus {
color: red;
}
.sobrenome:focus {
color: lime;
}
html
<input class="nome" value="Esse elemento ficará vermelho quando focado" />
<input
class="sobrenome"
value="Esse elemento ficará verde-limão quando focado" />
Especificações
| Specification |
|---|
| HTML # selector-focus |
| Selectors Level 4 # focus-pseudo |