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
.nome:focus {
color: red;
}
.sobrenome:focus {
color: lime;
}
<input class="nome" value="Esse elemento ficará vermelho quando focado">
<input class="sobrenome" value="Esse elemento ficará verde-limão quando focado">
Especificação
Especificação | Estado | Comentário |
---|---|---|
HTML Living Standard The definition of ':focus' in that specification. |
Padrão em tempo real | Define a semântica no HTML. |
Selectors Level 4 The definition of ':focus' in that specification. |
Rascunho atual | Nenhuma modificação. |
Selectors Level 3 The definition of ':focus' in that specification. |
Recomendação | Nenhuma modificação. |
CSS Level 2 (Revision 1) The definition of ':focus' in that specification. |
Recomendação | Definição inicial. |
Compatibilidade com navegadores
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
Funcionalidade | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte básico | 1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
Funcionalidade | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suporte básico | 1.0 | 1.0 (1) | 8.0 | 6.0 | 1.0 |