web:html:formulaires:pseudoclass

Ceci est une ancienne révision du document !

Pseudo classes et formulaires

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

Pseudo-classes

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

Champs requis

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

1
2
3
4
5
6
7
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) pour mentionner le caractère obligatoire d'un champ :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

Validité des données

L'utilisation des pseudo-classes :valid et :invalid permettent 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 :

  • Contrôles requis (:required) invalides s'ils n'ont pas de valeur.
  • Contrôles avec validation native (champs input d'un certain type) invalides si la valeur saisie est non conforme.
  • Contrôles avec limites (min et max) invalides en dehors des plages (:out-of-range ajouté).

1
2
3
4
5
<div>
  <label for="prenom">Prénom *: </label>
  <input id="prenom" name="prenom" type="text" required>
  <span></span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
}

  • web/html/formulaires/pseudoclass.1680861367.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron