CSS :focus Pseudo Class
La pseudo-classe :focus sélectionne les éléments ayant le focus. Découvrez-la et pratiquez avec des exemples.
La pseudo-classe :focus sélectionne et stylise un élément lorsqu'il est en focus — c'est-à-dire lorsqu'il est l'élément actuellement configuré pour recevoir la saisie clavier.
Un seul élément de la page peut détenir le focus à la fois. Les contrôles de formulaire tels que <input>, <button>, <textarea> et les liens peuvent recevoir le focus en appuyant sur la touche Tab ou en cliquant. Les éléments non interactifs (comme un <div>) peuvent également devenir focalisables en ajoutant un attribut tabindex="0".
Cette page explique le fonctionnement de :focus, pourquoi vous ne devriez presque jamais supprimer l'indicateur de focus sans le remplacer, et les pseudo-classes connexes :focus-visible et :focus-within qui résolvent des problèmes courants que :focus seul ne peut pas résoudre.
Fonctionnement du style de focus
Lorsqu'un élément prend le focus, le navigateur applique un contour par défaut afin que les utilisateurs clavier puissent voir où ils se trouvent. La règle :focus vous permet de remplacer ou d'améliorer cet indicateur :
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus est une pseudo-classe dynamique : les styles s'appliquent uniquement lorsque l'élément est en focus et sont supprimés dès que le focus se déplace ailleurs (par exemple, lorsque l'utilisateur passe au champ suivant avec Tab).
Considérations d'accessibilité
L'indicateur de focus visuel doit être accessible à tous les utilisateurs. Selon WCAG 2.1 SC 2.4.7 Focus Visible, l'indicateur de focus doit être clairement visible et maintenir un rapport de contraste d'au moins 3:1 par rapport aux couleurs adjacentes.
Une erreur courante consiste à supprimer entièrement le contour pour un aspect « plus épuré » :
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Si vous supprimez le outline par défaut, remplacez-le toujours par un indicateur personnalisé (une bordure visible, un box-shadow ou un changement d'arrière-plan) qui respecte l'exigence de contraste de 3:1 :
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
La pseudo-classe :focus simple se déclenche à la fois lors des clics souris et de la navigation clavier. Cela signifie qu'un clic sur un bouton peut laisser un anneau de focus visible après le clic — visuellement gênant pour les utilisateurs souris, mais essentiel pour les utilisateurs clavier.
La pseudo-classe :focus-visible résout ce problème : le navigateur la fait correspondre uniquement lorsqu'il juge qu'un indicateur visible est réellement utile, généralement lors de la navigation clavier. Le modèle recommandé consiste à conserver un indice subtil pour tous et un anneau fort uniquement pour :focus-visible :
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within correspond à un élément lorsque lui-même ou l'un de ses descendants est en focus. C'est pratique pour mettre en évidence un groupe de formulaire, une carte ou un menu déroulant entier lorsque l'un de ses champs est actif :
.field:focus-within {
border-color: #2563eb;
}Version
Syntaxe
Exemple de syntaxe CSS :focus
:focus {
css declarations;
}Exemple du sélecteur :focus :
Exemple de code 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>Exemple du sélecteur :focus avec la balise <label> :
Autre exemple de code 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-classes associées
:focus fait partie de plusieurs pseudo-classes dynamiques qui réagissent aux interactions de l'utilisateur. Explorez les autres :
:hover— stylise un élément lorsque le pointeur est au-dessus de lui.:active— stylise un élément pendant qu'il est activé (au moment du clic).outline— la propriété la plus souvent utilisée pour créer un indicateur de focus personnalisé.