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 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 9
Notes
Support complet 9
Notes
Notes Internet Explorer does not recognize :disabled on the <fieldset> element.
Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 2Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9.5Safari iOS Support complet 3.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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