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;
}
L'utilisation des pseudo-classes :valid et :invalid permet de gérer l'état visuel des contrôles de formulaires vis à vis de la validation.
:valid et :invalid sont sollicités dans les cas suivants :
<div> <label for="prenom">Prénom *: </label> <input id="prenom" name="prenom" type="text" required> <span></span> </div>
input + span {
position: relative;
}
input + span::before {
position: absolute;
right: -20px;
top: 5px;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: '✖';
color: red;
}
input:valid + span::before {
content: '✓';
color: green;
}