:focus
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
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 |
Compatibilidade com navegadores
Loading…