CSS :disabled Pseudo Class
Utilisez la pseudo-classe CSS :disabled pour sélectionner et styliser les éléments désactivés. Exemples pratiques inclus.
La pseudo-classe :disabled sélectionne et stylise tout élément actuellement désactivé — c'est-à-dire un élément avec lequel l'utilisateur ne peut pas interagir. Un contrôle devient désactivé lorsqu'il porte l'attribut HTML disabled, donc :disabled vous permet de donner à ces contrôles une apparence distincte "vous ne pouvez pas utiliser ceci" sans ajouter de classe supplémentaire.
![Exemple de pseudo-classe CSS :disabled](https://api.w3docs.com/uploads/media/default/0001/03/ced1796b1077a7b96196914b14dfc04aa89805ab.png "CSS :disabled pseudo-class example" =420x)
Cette page explique ce qui constitue un élément désactivé, la syntaxe du sélecteur, la relation entre :disabled et son opposé :enabled, la différence entre disabled et readonly, ainsi qu'un ensemble d'exemples de mise en forme exécutables.
Quels éléments peuvent être désactivés
Seuls les éléments qui peuvent être désactivés sont correspondus par :disabled. Il s'agit des contrôles de formulaire interactifs :
<button><input>(tous les types)<select>et ses<option>/<optgroup><textarea><fieldset>— désactiver un<fieldset>désactive tous les contrôles qu'il contient
Un contrôle désactivé se comporte différemment d'un contrôle normal :
- Il n'accepte pas les clics, la saisie de texte ni le focus clavier.
- Sa valeur n'est pas soumise avec le formulaire.
- Il n'est pas validé par le navigateur, donc
:valid/:invalidne s'y appliquent pas.
Les éléments de texte simples tels que <p> ou <div> ne peuvent pas être désactivés, ils ne correspondent donc jamais à :disabled.
:disabled vs. :enabled
:disabled et :enabled sont des images miroir. Tout contrôle pouvant être désactivé est correspondant par exactement l'un d'eux à la fois : :enabled lorsqu'il est interactif, :disabled lorsque l'attribut disabled est présent. Styliser les deux offre à l'utilisateur un contraste visuel clair entre les contrôles utilisables et inutilisables.
disabled vs. readonly
Ces deux attributs semblent similaires mais ne sont pas identiques :
disabled | readonly | |
|---|---|---|
| L'utilisateur peut le cibler | Non | Oui |
| L'utilisateur peut modifier la valeur | Non | Non |
| Valeur soumise avec le formulaire | Non | Oui |
| Correspondance avec | :disabled | :read-only |
Utilisez disabled pour désactiver entièrement un contrôle ; utilisez readonly (voir :read-only) lorsque la valeur doit rester visible et être soumise, mais pas modifiée.
Syntaxe
Utilisé seul, :disabled cible tout contrôle désactivé. Combinez-le avec un sélecteur de type ou d'attribut pour plus de précision :
/* every disabled control */
:disabled {
/* css declarations */
}
/* only disabled text inputs */
input[type="text"]:disabled {
background: #ccc;
cursor: not-allowed;
}Exemple de définition d'une couleur d'arrière-plan pour un élément <input> désactivé :
CSS :disabled code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 2px 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:disabled selector example for input</h2>
<form action="">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Exemple de définition d'une couleur d'arrière-plan pour des éléments <option> désactivés :
CSS :disabled another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:disabled {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:disabled selector example for option</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Remarque : La pseudo-classe
:disableda la priorité sur:validet:invalid. Les éléments de formulaire désactivés ne sont pas validés par le navigateur.
Exemple d'un élément <input> désactivé :
Example of disabled input element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
width: 60%;
margin: 0;
border: none;
outline: 1px solid lightgrey;
outline-offset: 2px;
}
input:disabled {
background: #cccccc;
cursor: not-allowed;
}
form {
background: #67a6ec;
padding: 1.5em;
max-width: 400px;
width: 100%;
outline: 10px solid rgba(17, 58, 103, 0.6);
}
hr {
visibility: hidden;
}
label {
margin-right: 3%;
text-align: left;
display: inline-block;
width: 35%;
}
</style>
</head>
<body>
<h2>:disabled selector example with styling</h2>
<form action="#">
<label for="name">Enabled Input:</label>
<input type="text" autofocus />
<hr />
<label for="name">Disabled Input:</label>
<input type="text" disabled />
</form>
</body>
</html>Note d'accessibilité
Comme un contrôle désactivé ne peut pas recevoir le focus, les utilisateurs au clavier et avec des lecteurs d'écran le passent directement et n'obtiennent aucune explication sur pourquoi il est indisponible. Ne vous fiez pas uniquement au grisage — lorsque la raison est importante, ajoutez un texte d'aide à proximité, ou gardez le contrôle activé et validez à la soumission à la place. Veillez également à conserver un contraste suffisant sur le texte désactivé pour qu'il reste lisible.
Pseudo-classes associées
:enabled— l'état opposé : contrôles avec lesquels l'utilisateur peut interagir.:read-onlyet:read-write— pour les champsreadonly.:required— contrôles qui doivent être remplis.:validet:invalid— états de validation du formulaire.:checked— cases à cocher, boutons radio et options sélectionnés.:focus— l'élément qui possède actuellement le focus clavier.