Pseudo-classe :invalid CSS

Définition et utilisation

CSS :invalid La pseudo-classe est utilisée pour définir le style des éléments de formulaire invalides.

Attention :Cette pseudo-classe ne s'applique qu'aux éléments de formulaire limités, tels que les éléments d'entrée avec des attributs min et max, les champs d'email sans adresse email valide ou les champs numériques sans valeur numérique, etc.

Attention :Si l'un des boutons radio d'un groupe est obligatoire, alors si aucun bouton radio du groupe n'est sélectionné, cette pseudo-classe s'appliquera à tous les boutons radio.

Astuce :Utiliser :valid La pseudo-classe définit le style des éléments de formulaire valides.

Exemple

Définir le style des éléments <fieldset> et <input> invalides :

fieldset:invalid {
  border: 2px solid red;
  background-color: beige;
}
input:invalid {
  border: 2px solid red;
  background-color: beige;
}

Essayez-le vous-même

Grammaire CSS

:invalid {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.

Pages associées

Référence :Sélecteur :valid CSS