:user-valid (:-moz-ui-valid)
Baseline 2023
Newly available
Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La pseudo-classe CSS :user-valid
représente tout élément de formulaire validé donc la valeur respecte la validation des contraintes. Toutefois, à la différence de :valid
, cette pseudo-classe ne cible l'élément qu'après que la personne a interagi avec.
Note : Cette pseudo-classe se comporte de la même façon que la pseudo-classe non-standard :-moz-ui-valid
.
Cette pseudo-classe s'applique selon les règles suivantes :
- Si le contrôle n'a pas le focus et que sa valeur est valide, cette pseudo-classe s'applique.
- Si le contrôle a le focus, et que la valeur était valide (potentiellement vide) lorsque le focus a été acquis, cette pseudo-classe s'applique.
- Si le contrôle a le focus, et que la valeur était invalide à l'acquisition du focus, on revalide à chaque frappe clavier.
- Si l'élément est obligatoire, les règles précédentes s'appliquent uniquement si l'utilisatrice ou l'utilisateur a modifié la valeur ou tenté d'envoyer le formulaire.
Par conséquent, si la valeur du contrôle était valide lorsque la personne a commencé l'interaction avec, la mise en forme relative à la validité est uniquement changée lorsque les actions font passer le focus à un autre contrôle. En revanche, si la personne tente de corriger une valeur précédemment incorrecte, le contrôle indique immédiatement lorsque la valeur devient valide. Les éléments obligatoires sont indiqués comme invalides uniquement si l'utilisatrice ou l'utilisateur les modifie ou tente d'envoyer le formulaire avec une valeur invalide inchangée.
Syntaxe
:user-valid
Exemples
Définir une couleur et un symbole dans le cas :user-valid
Dans l'exemple qui suit, la bordure verte et la coche s'affichent uniquement après une interaction avec le champ. Essayez de changer l'adresse électronique en une autre adresse valide pour observer l'effet obtenu.
CSS
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: "✓";
color: green;
}
HTML
<form>
<label for="email">Email *: </label>
<input
id="email"
name="email"
type="email"
value="test@example.com"
required />
<span></span>
</form>
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # user-valid-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser