:focus
Correspond à 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é.
Exemple
#.input {
border: 1px solid #52525b;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.35);
outline: 2px solid transparent;
}<label style="display: grid; gap: 6px;">
Adresse e-mail
<input class="input" type="email" placeholder="Cliquez dans le champ" style="padding: 10px 12px; border-radius: 10px; background: #18181b; color: inherit; font: inherit;">
</label>Un contour transparent n’est pas visible au quotidien. En mode contraste élevé de Windows, les ombres disparaissent et le contour reçoit une couleur système, donc le focus reste visible.
Définition et utilisation
#Un élément a le focus quand les frappes de touches lui sont destinées. Les champs de formulaire reçoivent le focus au clic, tout comme les liens, les boutons et les autres éléments interactifs lors de la navigation avec la touche Tab. À un instant donné, au plus un élément de la page a le focus.
La pseudo-classe :focus correspond toujours à l’élément qui a le focus, peu importe comment il l’a obtenu. Dans de nombreux navigateurs, un bouton cliqué à la souris l’obtient aussi, c’est pourquoi le contour qui apparaît après un clic est souvent jugé disgracieux. La solution n’est pas outline: none, mais :focus-visible, qui n’affiche l’indicateur que lorsqu’il est utile.
Les éléments ordinaires, comme div, n’acceptent pas le focus. Vous pouvez changer cela avec l’attribut tabindex="0", qui ajoute l’élément à l’ordre de tabulation, ou tabindex="-1", qui permet de donner le focus à l’élément par clic ou par script, tout en l’excluant de la touche Tab. Pour styliser un conteneur quand un élément à l’intérieur a le focus, utilisez :focus-within.
Syntaxe
#sélecteur:focus { propriété: valeur; }Utilisations courantes
#- Cliquez dans le champ : un contour violet apparaît. Cliquez ailleurs, et le contour disparaît.
- Cliquez sur le bouton avec la souris. Dans la plupart des navigateurs, il obtient aussi le focus, donc le contour apparaît même après un clic.
- Un simple
divavec un attributtabindex="0"peut aussi avoir le focus. Cliquez dessus ou atteignez-le avec la touche Tab. - Sans rien avant les deux-points, la règle s’applique à chaque élément qui a le focus. Cliquez dans l’aperçu et naviguez avec la touche Tab.
Utilisations courantes en pratique
#input:focus
input:focus {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}[tabindex]:focus
div avec un attribut tabindex="0" peut aussi avoir le focus. Cliquez dessus ou atteignez-le avec la touche Tab.[tabindex]:focus { background: #7c3aed; color: #fff; }:focus
:focus {
outline: 2px dashed #10b981;
outline-offset: 3px;
}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
#- Ne retirez jamais l’indicateur de focus sans remplacement. Si le contour après un clic vous dérange, déplacez le style vers
:focus-visibleplutôt que d’écrireoutline: none. - L’indicateur de focus doit être bien visible. Les recommandations d’accessibilité préconisent un contraste d’au moins 3:1 par rapport à l’environnement.
- L’ordre du focus suit l’ordre des éléments dans le HTML. Ne le modifiez pas avec des valeurs
tabindexpositives ; réorganisez plutôt le code.
Entrées associées
#- :focus vs :focus-visiblefocus cible tout élément qui a le focus, même après un clic de souris. focus-visible affiche un indicateur seulement là où le navigateur le juge nécessaire.
- :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.
- :focus-withinCorrespond à 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.
- :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.
- :activeCorrespond à l’élément au moment de son activation, le plus souvent quand le bouton de la souris est enfoncé sur un bouton ou un lien.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.