Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Pseudo-classe CSS :user-invalid
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2023.
La pseudo-classe CSS :user-invalid représente tout élément de formulaire validé dont la valeur n'est pas valide selon ses contraintes de validation, après que l'utilisateur·ice a interagi avec lui.
La pseudo-classe :user-invalid doit correspondre à un élément :invalid, :out-of-range, ou vide mais :required entre le moment où l'utilisateur·ice a tenté de soumettre le formulaire et avant que l'utilisateur·ice n'ait interagi à nouveau avec l'élément du formulaire.
Syntaxe
:user-invalid {
/* ... */
}
Exemples
Paramétrage d'une couleur et d'un symbole sur :user-invalid
Dans l'exemple suivant, la bordure rouge et le symbole ❌ n'apparaissent qu'une fois que l'utilisateur·ice a interagi avec le champ. Essayez de taper quelque chose d'autre qu'une adresse e-mail pour le voir en action.
<form>
<label for="email">E-mail * : </label>
<input id="email" name="email" type="email" required />
<span></span>
</form>
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: "✖";
color: red;
}
Spécifications
| Spécification |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.