La :focuspseudo classe en CSS est utilisée pour styliser un élément qui est actuellement ciblé par le clavier ou activé par la souris. Voici un exemple:
textarea:focus ( background: pink; )Tous les éléments (le plus souvent les s et les s) sont «focus» lorsqu'ils sont sélectionnés et prêts à entrer du texte (comme lorsqu'un curseur clignote). Les utilisateurs de souris peuvent cliquer dessus (ou leur associé label) pour se concentrer, et les utilisateurs de clavier peuvent TAB.
«Tabulation»
une autre utilisation de la :focuspseudo-classe est la «tabulation» à travers les éléments. De nombreux navigateurs ont un état de focus par défaut pour la sélection des onglets, qui est un contour en pointillé. Il est assez facile à retirer, mais assurez-vous de le remplacer par une alternative appropriée si vous le faites.
s, s, set textareas ont tous l' :focus état par défaut, mais vous pouvez donner un état de mise au point à tout élément en HTML. Les attributs contenteditable et tabindexfonctionnent pour cela, comme dans cet exemple:
En rapport
Article le 12 mai 2017La pseudo-classe `: focus-within`
Chris Coyier
Prise en charge du navigateur
Tous les navigateurs prennent en charge l'utilisation de base de :focus.