Sélecteurs CSS :required et :optional.

Description des pseudo-classes :required et :optional.

Ces deux pseudo-classes ciblent des zones de saisie (balises input, select ou textarea).
:required cible plus précisément les zones dont la saisie est rendu obligatoire par l'attribut required dans le code HTML. A l'inverse :optional cible les zones dont la saisie est optionnelle.

Ces deux pseudo-classes ne sont opérationnelles que si les zones de saisie sont incluses dans un formulaire.

Exemples d'utilisation de :required et :optional.

Dans l'exemple ci-dessous les zones de saisie obligatoires sont entourées d'un contour épais, tandis que celles qui sont optionnelles sont entourées d'un contour fin.
Afin de préserver l'interactivité avec l'utilisateur, le contour de la zone qui a le focus change de couleur.

Survolez les zones de saisie pour afficher leur code HTML, et cliquez sur le bouton ci-dessous pour le code CSS.

Ajouter une marque après les zones obligatoires.

L'ajout d'une marque peut se faire avec la propriété et le pseudo-élément . Dans cet exemple, une étoile rouge a été ajoutée après les zones obligatoires.

Le code CSS est assez compliqué parce que le pseudo-élément n'est pas utilisable sur les éléments du type input. Il a fallu inclure les balises input chacune dans une balise span. La complication vient du fait que s'applique aux balises span tandis que :required s'applique aux balises input.

Le fonctionnement de cet exemple n'est pas garanti sur tous les navigateurs. En particulier il ne fonctionnera pas sur Firefox  .

Ajout d'une marque après les zones obligatoires.
Solution compatible Firefox.

Firefox   ne reconnaît pas la pseudo-classe :has() utilisée dans l'exemple précédent. Voici une autre solution compatible tous navigateurs, mais plus complexe. Les zones de saisie input ne sont pas incluses dans une balise span comme précédemment, mais suivies par une balise span.

Compatibilité des navigateurs.

Les pseudo-classes :required et :optional ne posent aucun problème de compatibilité avec les navigateurs actuels.

1

Pseudo-classe
:required

2

Pseudo-classe
:optional

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Voir aussi...

De nombreuses pseudo-classes sont relatives aux zones de saisie et à leur état à un moment donné (avec une saisie correcte, verrouillées, en lecture seule, etc.). La liste ci-dessous vous permet d'accéder rapidement à leur description.

:autofill
Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
⚠
:blank
Pseudo classe désignant les zones de saisie vides.
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
:default
Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe désignant les zones de saisie veerrouillées.
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
:placeholder-shown
Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.