CSS : Pseudo-classe :focus

La pseudo-classe :focus sélectionne et met en forme les éléments sur lesquels l'utilisateur a mis le focus.

Les éléments, tels que <input>, <button>, et <textarea>, peuvent recevoir le focus soit en naviguant au clavier avec la touche Tab, soit en cliquant dessus. Les éléments non interactifs peuvent également recevoir le focus au clavier s'ils incluent l'attribut tabindex="0".

Accessibilité

L'indicateur visuel de focus 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 conserver un ratio de contraste d'au moins 3:1 par rapport aux couleurs adjacentes.

Lorsque vous supprimez le contour de focus par défaut, remplacez-le toujours par un indicateur personnalisé qui respecte les exigences de la WCAG 2.1 SC 2.4.7.

Pour une meilleure expérience utilisateur, envisagez d'utiliser la pseudo-classe :focus-visible à la place de :focus. Elle applique des styles uniquement lorsque l'élément est focusé au clavier, évitant ainsi des changements visuels inutiles lors de l'utilisation d'une souris ou du tactile.

Pseudo-classe CSS :focus

css

:focus {
  outline: none;
}

Version

CSS2 Spec

Selectors level 3

Selectors level 4

Syntaxe

Exemple de syntaxe CSS :focus

css

:focus {
  css declarations;
}

Exemple du sélecteur :focus :

Exemple de code CSS :focus

html

<!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>

Try it Yourself »

Exemple du sélecteur :focus avec la balise `<label>` :

Autre exemple de code CSS :focus

html

<!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>

Try it Yourself »

Pratique

Quelle est la fonction de la pseudo-classe ':focus' en CSS ?

Elle est utilisée pour sélectionner et mettre en forme l'élément sur lequel l'utilisateur interagit actuellement.Elle est utilisée pour appliquer des styles à un élément lorsque le pointeur de la souris de l'utilisateur survole celui-ci.Elle est utilisée pour cibler et mettre en forme un élément lorsqu'il a été cliqué ou tapé.Elle est utilisée pour mettre en forme un élément lorsque le pointeur de la souris de l'utilisateur s'en éloigne.

CSS : Pseudo-classe :focus ​

Accessibilité ​

Version ​

Syntaxe ​

Exemple du sélecteur :focus : ​

Exemple du sélecteur :focus avec la balise <label> : ​