Sélecteurs CSS :required et :optional.

:required
:optional

Résumé des caractéristiques du sélecteur :required

Description rapide
Pseudo-classe désignant les zones de saisie obligatoires.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
Statut du document: WD (document de travail)

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é content et le pseudo-élément ::after. 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 ::after 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 ::after 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.

Colonne 1
Support par les navigateur du sélecteur par pseudo-classe :required qui cible les zones de saisie obligatoires.
Colonne 2
Support par les navigateurs du sélecteur par pseudo-classe :optional, qui cible les zones de saisie optionnelles (qui peuvent être laissées vides).
1
Pseudo-classe
:required
2
Pseudo-classe
:optional
Estimation de la prise en charge globale.
97%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

KaiOS Browser

Androïd Brower

Chrome

Chrome pour Androïd

Opéra mini

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

Historique de la pseudo-classe :required.

  • Sélecteurs - Niveau 4

    Concernant :required. Introduction des sélecteur par pseudo-classe :required et :optional dans ce niveau 4 de la spécification sur les sélecteurs.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

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 ciblant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe ciblant les zones de saisie verrouillées (celles qui comportent l'attribut disabled).
: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-classe désignant les zones de saisie 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.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
: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.