Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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é 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
:required
2
:optional
Estimation de la prise en charge en pourcentage du parc actuel.
97%
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

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.
  • :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.
  • :indeterminate : Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
  • :in-range : Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
  • :invalid : Pseudo classe désignant les zones de saisie contenant une information invalide.
  • :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.
  • :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.