CSS : la pseudo-classe :valid
La pseudo-classe :valid sélectionne les contrôles de formulaire (tels que <input>, <select> et <textarea>) dont la valeur est valide selon les paramètres de l'élément.
Le sélecteur :valid s'applique aux contrôles de formulaire qui respectent leurs contraintes de validation, tels que les éléments <input> avec les attributs min et max, les champs e-mail contenant une adresse valide, les champs numériques avec une valeur numérique, les champs URL ou date avec des données valides, et les champs obligatoires avec une valeur non vide.
Version
Syntaxe
Syntaxe CSS :valid
css
:valid {
css declarations;
}Exemple du sélecteur :valid :
Exemple de code CSS :valid
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>Dans l'exemple ci-dessus, le style disparaît lorsqu'une adresse e-mail invalide est saisie.
Pratique
Quel est l'usage et la fonction de la pseudo-classe CSS 'valid' ?