4.1 Pseudo-classe :checked
Les pseudo-classes de formulaire en CSS offrent des possibilités de styliser les éléments de formulaire en fonction de leur état. Ces pseudo-classes permettent de créer des formulaires interactifs et accessibles, améliorant l'interface utilisateur et l'expérience utilisateur. Regardons de plus près les pseudo-classes :checked, :disabled, :enabled et :invalid.
La pseudo-classe :checked s'applique aux éléments de formulaire qui sont dans l'état "sélectionné". Cela s'applique aux cases à cocher (<input type="checkbox">), aux boutons radio (<input type="radio">) et aux options (<option>).
Syntaxe :
sélecteur:checked {
propriétés: valeurs;
}
Exemple d'utilisation
Dans cet exemple, les cases à cocher, boutons radio et options sélectionnées reçoivent la couleur de fond appropriée lorsqu'ils sont dans l'état "sélectionné" :
/* Stylisation de la case à cocher sélectionnée */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylisation du bouton radio sélectionné */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylisation de l'option sélectionnée */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudo-classe :disabled
La pseudo-classe :disabled s'applique aux éléments de formulaire qui sont désactivés. Cela est utile pour styliser les éléments temporairement indisponibles pour l'interaction.
Syntaxe :
sélecteur:disabled {
propriétés: valeurs;
}
Exemple d'utilisation
Dans cet exemple, les champs de saisie et les boutons désactivés reçoivent la couleur de fond, bordures et texte appropriés, et modifient également le curseur en "interdit":
/* Stylisation du champ de saisie désactivé */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylisation du bouton désactivé */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudo-classe :enabled
La pseudo-classe :enabled s'applique aux éléments de formulaire qui sont activés. Cela permet de styliser les éléments disponibles pour l'interaction.
Syntaxe :
sélecteur:enabled {
propriétés: valeurs;
}
Exemple d'utilisation
Dans cet exemple, les champs de saisie et les boutons activés reçoivent la couleur de fond, bordures et texte appropriés, et modifient également le curseur en "pointeur":
/* Stylisation du champ de saisie activé */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylisation du bouton activé */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudo-classe :invalid
La pseudo-classe :invalid s'applique aux éléments de formulaire qui n'ont pas réussi la validation. Cela permet de styliser les champs de saisie qui contiennent des données incorrectes.
Syntaxe :
sélecteur:invalid {
propriétés: valeurs;
}
Exemple d'utilisation
Dans cet exemple, les champs de saisie et les zones de texte incorrects reçoivent la couleur de bordure et de fond appropriée, pour indiquer visuellement que les données n'ont pas réussi la validation:
/* Stylisation du champ de saisie incorrect */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylisation de la zone de texte incorrecte */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Exemple de réalisation complète
/* Stylisation de la case à cocher sélectionnée */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylisation du bouton radio sélectionné */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylisation du champ de saisie désactivé */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylisation du bouton désactivé */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Stylisation du champ de saisie activé */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylisation du bouton activé */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Stylisation du champ de saisie incorrect */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylisation de la zone de texte incorrecte */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de pseudo-classes de formulaire</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION