Pseudo classes et formulaires

Certaines pseudo classes CSS permettent de gérer l'apparence et le comportement des champs de formulaire :

Pseudoclasse	Rôle
:hover	Cible un élément survolé par la souris
:focus	Cible un élément ayant le focus
:active	Cible un élément activé au clavier ou à la souris
:required	Cible un élément requis (ayant l'attribut required)
:optional	Cible un élément non requis (opposé de :required)
:valid	Cible un élément valide (ou n'ayant aucun contrôle de validité)
:invalid	Cible un élément non requis (opposé de :valid)

:required et :optional ciblent les champs respectivement obligatoires ou optionnels.

input:required {
  border: 1px solid blue;
}

input:optional {
  border: 1px solid silver;
}

Il est possible d'ajouter un élément de type texte (span vide dans le cas ci-dessous), et de l'utiliser pour faire apparaître le caractère obligatoire du champ, en position absolute :

<div>
  <label for="prenom">Prénom : </label>
  <input id="prenom" name="prenom" type="text" required>
  <span></span>
</div>

input + span {
  position: relative;
}

input:required + span::after {
  font-size: 1rem;
  position: absolute;
  content: "obligatoire";
  color: white;
  background-color: #db4764;
  padding: 5px 10px;
  top: -36px;
  left: -70px;
}

Prénom : syntaxhighlighterConfig = { autoLinks: true, gutter: true, htmlScript: false, tabSize: 4, smartTabs: true }

Pseudo classes et formulaires

Pseudo-classes

Champs requis