:focus

La pseudo-classe :focus, è utilizzata, in CSS, per applicare lo stile ad un elemento che è strato messo a fuoco. Generalmente quando un utente ci clicca o preme sopra oppure lo seleziona con il tasto Tab della tastiera.

textarea:focus {
  background: yellow;
}

Ecco un esempio live:

Per quanto riguarda gli <input> e le <textarea> sono “a fuoco” quando sono selezionate e pronte per inserire del testo (quando il cursore diventa la barra verticale che lampeggia).

Un’altro utilizzo per la pseudo-classe :focus è per quando si naviga tra gli elementi utilizzando il taso Tab.

Molti browser hanno uno stile predefinito per gli elementi a fuoco, solitamente un contorno esterno puntinato. Molto semplice da rimuovere ma altamente sconsigliato, se non si pianifica già di rimpiazzarlo con un’alternativa adeguata.

Oltre agli input e alle textarea viste prima, anche gli elementi <a> e <button> hanno uno stato :focus predefinito, ma in HTML5 è possibile assegnarne uno a qualsiasi elemento.

Entrambi gli attributi contenteditable e tabindex funzionano.

Compatibilità dei Browser