Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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: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

Etiquetas do documento e colaboradores

Colaboradores desta página: LeoRiether, tfvictorino
Última atualização por: LeoRiether,