:focus

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

BCD tables only load in the browser