Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
: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
Apseudo-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 value="Esse elemento ficará vermelho quando focado" /><input value="Esse elemento ficará verde-limão quando focado" />Especificações
| Specification |
|---|
| HTML # selector-focus |
| Selectors Level 4 # focus-pseudo |