CSS :required Pseudo-classe - Apprendre CSS

La pseudo-classe CSS :required correspond à tout contrôle de formulaire dont l'attribut required est défini. Utilisez-la pour signaler visuellement les champs qu'un utilisateur doit remplir avant de pouvoir soumettre le formulaire — une petite astérisque, une bordure colorée ou un message d'indication — afin que les utilisateurs ne se retrouvent pas rejetés par une erreur de validation après avoir cliqué sur le bouton d'envoi.

Cette page explique ce que :required correspond, en quoi elle diffère de :optional et des pseudo-classes de validité, la mise en garde d'accessibilité à connaître, et un exemple fonctionnel que vous pouvez exécuter.

Quels éléments `:required` correspond-elle ?

:required ne correspond qu'aux éléments qui supportent réellement l'attribut required et qui l'ont défini :

<input> (d'un type pouvant être requis — text, email, password, tel, url, number, date, checkbox, radio, file, etc.)
<select>
<textarea>

Elle ne correspond pas à <button>, <input type="submit">, <input type="hidden">, ni à tout élément pour lequel required n'a pas de sens. La correspondance est dynamique : si vous ajoutez ou supprimez l'attribut required avec JavaScript, le style se met à jour immédiatement.

`:required` vs. les pseudo-classes associées

:required décrit l'état de la contrainte, et non si l'utilisateur l'a satisfaite. Combinez-la avec les pseudo-classes voisines appropriées :

Pseudo-classe	Correspond quand…
`:required`	le champ possède l'attribut `required`
`:optional`	le champ ne possède pas `required`
`:valid`	la valeur actuelle du champ respecte ses contraintes
`:invalid`	la valeur actuelle du champ ne respecte pas ses contraintes

Chaque contrôle de formulaire est soit :required soit :optional, ce qui vous permet de répartir clairement le style entre les deux. Les états de validité (:valid / :invalid) réagissent ensuite à mesure que l'utilisateur saisit.

Syntaxe

:required {
  /* CSS declarations */
}

On la scope généralement à un type de contrôle précis pour éviter que la règle ne s'applique à des éléments sans rapport :

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Note d'accessibilité

Le style seul (couleur, bordure plus épaisse) ne suffit pas — les utilisateurs daltoniens et ceux utilisant des lecteurs d'écran pourraient le manquer. Conservez l'attribut natif required sur le contrôle (il expose l'obligation aux technologies d'assistance et déclenche la validation du navigateur) et renforcez-le avec un indicateur textuel visible comme une astérisque. :required sert au rendu visuel, pas à l'information.

Exemple

L'exemple ci-dessous marque les champs obligatoires avec une bordure inférieure bleue et grise les champs optionnels en utilisant :optional :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Essayez vous-même »

Les champs obligatoires Name et Email obtiennent le soulignement bleu ; les champs optionnels Phone et Address obtiennent le fond gris — entièrement piloté par les règles :required et :optional.

Compatibilité des navigateurs et spécification

:required est prise en charge par tous les navigateurs modernes depuis de nombreuses années, vous pouvez donc l'utiliser sans solution de repli. Elle est définie dans deux spécifications :

Sujets connexes

:optional — l'inverse : style les contrôles sans required.
:valid et :invalid — réagissent selon si la valeur saisie respecte ses contraintes.
:focus — combinez avec :required pour mettre en évidence le champ obligatoire actif.
:disabled et :checked — autres pseudo-classes d'état de formulaire.
HTML Forms — où l'attribut required est défini.

Pratique

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

Elle sélectionne tout élément `<input>` possédant un attribut 'required'Elle sélectionne tout élément `<input>` sans attribut 'required'Elle intègre des images dans le fichier CSSElle permet de sélectionner les éléments qui possèdent l'attribut required dans le formulaireElle ajuste la taille des images en CSS

Quels éléments :required correspond-elle ?

:required vs. les pseudo-classes associées