:user-invalid
Baseline
2023
Newly available
Depuis November 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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
| Specification |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |
Compatibilité des navigateurs
Chargement…