CSS :focus Pseudo Classe
La pseudo-classe CSS :focus seleziona gli elementi focalizzati. Scopri come funziona e pratica con esempi.
La pseudo-classe :focus seleziona e applica stili a un elemento mentre è focalizzato — ovvero, mentre è l'elemento attualmente impostato per ricevere l'input da tastiera.
Solo un elemento per pagina può essere attivo alla volta. I controlli di form come <input>, <button>, <textarea> e i link possono ricevere il focus tramite il tasto Tab oppure con un clic del mouse. Anche gli elementi non interattivi (come un <div>) possono diventare focalizzabili aggiungendo l'attributo tabindex="0".
Questa pagina illustra come funziona :focus, perché quasi mai dovresti rimuovere l'indicatore di focus senza sostituirlo, e le pseudo-classi correlate :focus-visible e :focus-within che risolvono i problemi comuni che :focus da solo non può gestire.
Come funziona lo stile del focus
Quando un elemento riceve il focus, il browser applica un outline predefinito in modo che gli utenti da tastiera possano vedere dove si trovano. La regola :focus ti consente di sovrascrivere o migliorare quell'indicatore:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus è una pseudo-classe dinamica: gli stili vengono applicati solo mentre l'elemento è focalizzato e vengono rimossi nel momento in cui il focus si sposta altrove (ad esempio, quando l'utente preme Tab per passare al campo successivo).
Considerazioni sull'accessibilità
L'indicatore visivo del focus deve essere accessibile a tutti gli utenti. Secondo WCAG 2.1 SC 2.4.7 Focus Visible, l'indicatore di focus deve essere chiaramente visibile e mantenere un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti.
Un errore comune è rimuovere completamente il contorno per un aspetto "più pulito":
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Se rimuovi il valore predefinito di outline, sostituiscilo sempre con un indicatore personalizzato (un bordo visibile, un box-shadow o un cambio di sfondo) che soddisfi il requisito di contrasto 3:1:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
:focus semplice si attiva su entrambi i clic del mouse e la navigazione tramite tastiera. Ciò significa che fare clic su un pulsante può lasciare un anello di focus visibile dopo il clic — visivamente rumoroso per gli utenti con mouse, ma essenziale per gli utenti da tastiera.
La pseudo-classe :focus-visible risolve questo problema: il browser la abbina solo quando decide che un indicatore visibile è genuinamente utile, tipicamente durante la navigazione da tastiera. Il pattern consigliato è mantenere un suggerimento sottile per tutti e un anello forte solo per :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within corrisponde a un elemento quando esso stesso o uno qualsiasi dei suoi discendenti è focalizzato. È utile per evidenziare un intero gruppo di form, una card o un menu a tendina quando uno dei suoi input è attivo:
.field:focus-within {
border-color: #2563eb;
}Versione
Sintassi
Esempio di sintassi CSS :focus
:focus {
css declarations;
}Esempio del selettore :focus:
Esempio di codice CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Esempio del selettore :focus con il tag <label>:
Altro esempio di codice CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Pseudo-classi correlate
:focus è una delle diverse pseudo-classi dinamiche che rispondono all'interazione dell'utente. Esplora le altre:
:hover— applica stili a un elemento mentre il puntatore si trova sopra di esso.:active— applica stili a un elemento mentre viene attivato (nel momento del clic).outline— la proprietà più spesso usata per costruire un indicatore di focus personalizzato.