CSS :invalid Pseudo-class
La pseudo-classe CSS :invalid sélectionne les contrôles associés à un formulaire (tels que <input>, <select> et <textarea>) dont la valeur est invalide selon leurs paramètres.
Le sélecteur :invalid s'applique aux éléments de formulaire soumis à des contraintes de validation, comme les champs <input> avec les attributs min et max (pour les types nombre, plage et date), les champs e-mail sans adresse valide, les champs numériques sans valeur numérique, ou les champs obligatoires avec une valeur vide.
Notes
Boutons radio
Lorsqu'un des boutons radio d'un groupe est obligatoire, le sélecteur :invalid s'applique à tous (si aucun bouton du groupe n'est sélectionné). Les boutons radio groupés ont la même valeur pour leur attribut name.
Valeurs par défaut de Gecko
Par défaut, Gecko n'applique aucun style à la pseudo-classe :invalid (nous pouvons cependant appliquer une lueur rouge avec la propriété box-shadow), mais il applique un style à la pseudo-classe :-moz-ui-invalid, qui s'applique dans un sous-ensemble des cas de la pseudo-classe :invalid.
Pseudo-classe complémentaire
À titre de comparaison, la pseudo-classe :valid sélectionne les contrôles de formulaire qui respectent leurs contraintes de validation.
Version
Syntaxe
Code de syntaxe CSS :invalid
:invalid {
css declarations;
}Exemple du sélecteur :invalid :
Exemple de code CSS :invalid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:invalid {
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<h2>:invalid selector example</h2>
<form>
<input type="email" value="invalid-email" required />
</form>
</body>
</html>Pratique
Quelle est la fonction de la pseudo-classe ':invalid' en CSS ?