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;
}
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. |
Candidat au statut de recommandation | Définition de la pseudo-classe mais pas de la sémantique associée. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 10.0 | 4.0 (2) | (Oui) | 10 | 10.0 | 5.0 |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 4.4.4 | 4.0 (2) | (Oui) | Pas de support | 10.0 | 5.0 |