:disabled

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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:disabledChrome Support complet 1Edge Support complet 12
Notes
Support complet 12
Notes
Notes Edge does not recognize :disabled on the <fieldset> element.
Firefox 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 Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.1Samsung Internet Android Support complet 1.0

Légende

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

Voir aussi