:focus

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 { ... }

Examplos

.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
WHATWG HTML Living Standard
The definition of ':focus' in that specification.
Living Standard Define a semântica no HTML.
Selectors Level 4
The definition of ':focus' in that specification.
Working Draft Nenhuma modificação.
Selectors Level 3
The definition of ':focus' in that specification.
Recommendation Nenhuma modificação.
CSS Level 2 (Revision 1)
The definition of ':focus' in that specification.
Recommendation Definição inicial.

Compatibilidade com navegadores

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: tfvictorino
 Última atualização por: tfvictorino,