La pseudo-classe :disabled permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.

/* Cible tous les champs de saisie texte */
/* qui sont désactivés */
input[type="text"]:disabled {
  background: #ccc;
}

Syntaxe

:disabled

Exemples

CSS

input[type="text"]:disabled { background: #ccc; }

HTML

<form action="#">
  <fieldset>
    <legend>Adresse de livraison</legend>
    <input type="text" placeholder="Nom">
    <input type="text" placeholder="Adresse">
    <input type="text" placeholder="Code postal">
  </fieldset>
  <fieldset id="facturation">
    <legend>Adresse de facturation</legend>
    <label for="facturation_livraison">Identique à l'adresse de livraison</label>
    <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Nom" disabled>
    <input type="text" placeholder="Adresse" disabled>
    <input type="text" placeholder="Code postal" disabled>
  </fieldset>
</form>

JavaScript

function toggleBilling() {
  var billingItems = document.querySelectorAll('#facturation input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':disabled' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':disabled' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux formulaires.
Selectors Level 4
La définition de ':disabled' dans cette spécification.
Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':disabled' dans cette spécification.
Recommendation proposée Référence à la spécification de niveau 3 sur les sélecteurs.
Selectors Level 3
La définition de ':disabled' dans cette spécification.
Recommendation Définition de la pseudo-classe mais sans la sémantique associée.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui19193.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 ? Oui49.53.1 ?

1. Internet Explorer does not recognize :disabled on the <fieldset> element.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB
Dernière mise à jour par : SphinxKnight,