:focus-within
Correspond à un élément qui a lui-même le focus ou qui contient un élément avec le focus. Permet de mettre en valeur tout un formulaire ou une carte.
Exemple
#.search {
border: 1px solid #3f3f46;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search:focus-within {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.3);
}<label class="search" style="display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #18181b;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a1a1aa" stroke-width="2.5" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
<input placeholder="Rechercher dans la documentation" style="flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit;">
</label>Cliquez dans le champ. Le contour s’applique à tout le conteneur avec l’icône, donc le champ lui-même peut rester sans bordure.
Définition et utilisation
#La pseudo-classe :focus-within fait remonter l’information de focus dans l’arbre. Elle correspond à l’élément qui a le focus et à tous ses ancêtres. Un formulaire avec :focus-within change d’apparence dès que l’utilisateur clique sur l’un de ses champs.
C’est un moyen simple de mettre en valeur tout un groupe : une ligne de formulaire, un champ de recherche avec une icône, ou une carte avec des boutons. Ce genre d’effet nécessitait auparavant du JavaScript.
Elle fonctionne avec tout type de focus, y compris après un clic de souris. Si vous voulez réagir uniquement au focus clavier, associez :has() à :focus-visible : .card:has(:focus-visible).
Syntaxe
#sélecteur:focus-within { propriété: valeur; }Utilisations courantes
#- Cliquez sur n’importe quel champ : tout le formulaire se met en valeur.
- Seule l’étiquette contenant le champ actif se met en valeur.
- Le formulaire est atténué tant que vous ne cliquez pas dans l’un des champs.
.demo:focus-within label:not(:focus-within)
Mode concentration : pendant que vous écrivez dans un champ, l’autre s’estompe.
Utilisations courantes en pratique
#.demo:focus-within
.demo:focus-within {
background: rgb(124 58 237 / 0.2);
outline: 2px solid #a78bfa;
}label:focus-within
label:focus-within { color: #fbbf24; }.demo:not(:focus-within)
.demo:not(:focus-within) { opacity: 0.55; }.demo:focus-within label:not(:focus-within)
.demo:focus-within label:not(:focus-within) { opacity: 0.4; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Quand vous cachez le contour d’un champ à l’intérieur d’un composant plus large, montrez le focus sur tout le composant via
:focus-within. L’indicateur doit rester visible. - Les menus déroulants ouverts au survol (
:hover) devraient aussi s’ouvrir avec:focus-within. Ils deviennent alors utilisables au clavier.
Entrées associées
#- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :hoverCorrespond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
- :invalidCorrespond aux champs de formulaire dont la valeur enfreint les règles de validation HTML, par exemple un champ requis vide ou une adresse e-mail incorrecte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.