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
[caniuse feature=”mdn-css_selectors_hover”]