:required

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.

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

Syntaxe

:required { style properties }

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

Compatibilité des navigateurs

Voir aussi

• :optional
• :invalid
• :valid