:disabled
Correspond aux éléments désactivés d’un formulaire, c’est-à-dire ceux qu’on ne peut ni cliquer, ni cocher, ni modifier.
Exemple
#.btn {
background: #7c3aed;
transition: opacity 0.2s;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}<form class="stage" style="display: grid; gap: 10px; justify-items: start;">
<label style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" onchange="this.form.elements.send.disabled = !this.checked">
J’accepte le règlement
</label>
<button class="btn" name="send" type="button" disabled style="padding: 8px 16px; border: 0; border-radius: 8px; color: #fff; font: inherit;">S’inscrire au cours</button>
</form>Cochez la case. Le script retire l’attribut disabled du bouton, et le CSS arrête immédiatement de le griser.
Définition et utilisation
#La pseudo-classe :disabled sélectionne les contrôles avec l’attribut disabled : boutons, champs input, listes select, champs textarea, ainsi que option, optgroup et fieldset. Un élément désactivé ne réagit pas aux clics, ne reçoit pas le focus et n’est pas envoyé avec le formulaire.
La désactivation se propage aussi via <fieldset disabled> : tous les contrôles à l’intérieur correspondent alors à :disabled, sauf ceux de la première légende. Le contraire de :disabled est :enabled, qui correspond aux contrôles actifs.
Les navigateurs grisent par défaut les contrôles désactivés, mais avec une apparence personnalisée, il faut y veiller soi-même. L’ensemble classique associe une opacité réduite et un curseur not-allowed. N’oubliez pas que :disabled ne fonctionne pas pour les liens ni pour les éléments marqués seulement par aria-disabled="true" ; utilisez pour eux un sélecteur d’attribut.
Syntaxe
#sélecteur:disabled { propriété: valeur; }Utilisations courantes
#- Les contrôles désactivés sont atténués, et le curseur affiche une interdiction au-dessus. Survolez pour vérifier.
- L’effet de survol seulement pour les boutons actifs, grâce à la pseudo-classe opposée
:enabled. Le bouton désactivé ne réagit pas. - Une bordure en pointillés et un texte atténué indiquent clairement qu’un champ désactivé ne peut pas être modifié.
Utilisations courantes en pratique
#:disabled
:disabled { opacity: 0.45; cursor: not-allowed; }input:disabled
input:disabled { border-style: dashed; color: #71717a; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Un bouton désactivé n’explique pas pourquoi il l’est. Ajoutez à côté une courte indication, ou laissez le bouton actif et affichez un message après le clic.
- N’exagérez pas la transparence : le contrôle doit paraître inactif, mais son texte doit rester lisible.
- Toute une section de formulaire se désactive avec un seul attribut sur
<fieldset disabled>. Tous les champs à l’intérieur correspondent alors immédiatement à:disabled.
Entrées associées
#- :checkedCorrespond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
- :invalidCorrespond aux champs de formulaire dont la valeur enfreint les règles de validation HTML, par exemple un champ requis vide ou une adresse e-mail incorrecte.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.