La pseudo-classe CSS :focus
rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.
/* Seleziona qualsiasi <input> che ha ricevuto focus */
input:focus {
color: red;
}
Nota: Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare :focus-within
se si vuole selezionare un elemento che contiene un elemento che ha ricevuto il focus.
Sintassi
:focus
Esempio
HTML
<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Risultato
Interessi per l'Accessibilità
Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.
- Indicatori visivi di focus accessibili: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
:focus { outline: none; }
Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11
- Suggerimento veloce: Never remove CSS outlines
Specifiche
Specifica | Status | Commenti |
---|---|---|
HTML Living Standard The definition of ':focus' in that specification. |
Living Standard | Definisce semantiche specifiche HTML. |
Selectors Level 4 The definition of ':focus' in that specification. |
Working Draft | Nessun cambiamento. |
Selectors Level 3 The definition of ':focus' in that specification. |
Recommendation | Nessun cambiamento. |
CSS Level 2 (Revision 1) The definition of ':focus' in that specification. |
Recommendation | Definizione iniziale. |
Compatibilità Browser
BCD tables only load in the browser