Pseudo-classe CSS :focus
La pseudo-classe CSS :focus seleziona gli elementi che hanno il focus. Scopri la pseudo-classe ed esercitati con gli esempi.
La pseudo-classe :focus seleziona e applica stili agli elementi a cui l'utente assegna il focus.
Elementi come <input>, <button> e <textarea> possono ricevere il focus sia tramite il tasto Tab della tastiera sia con un clic. Anche gli elementi non interattivi possono ricevere il focus da tastiera se includono un attributo tabindex="0".
Considerazioni sull'accessibilità
L'indicatore visivo del focus dovrebbe essere accessibile a tutti gli utenti. Secondo le 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.
Quando rimuovi l'outline di focus predefinito, sostituiscilo sempre con un indicatore personalizzato che soddisfi i requisiti delle WCAG 2.1 SC 2.4.7.
Per una migliore esperienza utente, valuta l'uso della pseudo-classe :focus-visible invece di :focus. Applica gli stili solo quando l'elemento riceve il focus tramite tastiera, evitando modifiche visive non necessarie quando si usa il mouse o il tocco.
Pseudo-classe CSS :focus
:focus {
outline: none;
}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>