:focus

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

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.

: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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:focusChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Vedi anche