La pseudo-classe :required permet de cibler un élément <input> pour lequel l'attribut required est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.

/* Cible les éléments <input> qui ont */
/* l'attribut required */
input:required {
  border: 1px dashed red;
}

Note : La pseudo-classe :optional pourra être utilisée pour mettre en forme les champs facultatifs.

Syntaxe

:required

Exemples

CSS

input {
  border-width: 3px;
}
input:optional {
  border-color: #008000;
}  
input:required {
  border-color: #800000;
}

HTML

<form>
  <label for="url-input">Tapez une URL :</label>
  <input type="url" id="url-input">
  <br>
  <br>
  <label for="email-input">Tapez une adresse courriel :</label>
  <input type="email" id="email-input" required>
</form>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':required' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':required' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux contraintes de validation.
Selectors Level 4
La définition de ':required' dans cette spécification.
Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':required' dans cette spécification.
Recommendation proposée Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple10 Oui410105
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.4.4 ? Oui4105 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, tregagnon, FredB
 Dernière mise à jour par : SphinxKnight,