mozilla

:disabled

Résumé

La pseudo-classes :disabled représente n'importe quel élément désactivé. Un élément est désactivé s'il ne peut être activé (par exemple sélectionné, cliqué ou ne peut accepter du texte) ou ne peut pas être mis en sélection. L'élément a aussi un état activé, dans lequel il peut être sélectionné ou accepter la mise en selection.

Exemples

Exemple de sélecteurs

input:disabled
Sélectionne tous les champs input désactivés
select.pays:disabled
Vise un élément select avec une classe pays qui est désactivé

Exemple d'utilisation

Le code CSS suivant :

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

appliqué à cet extrait HTML5 :

<form action="#">
  <fieldset>
    <legend>Adresse d'expédition</legend>
    <input type="text" name="shipping_name" placeholder="Nom">
    <input type="text" name="shipping_address" placeholder="Addresse">
    <input type="text" name="shipping_zipCode" placeholder="Zip Code">
  </fieldset>
  <fieldset id="billing">
    <legend>Adresse de facturation</legend>
    <label for="billing_is_shipping">Même adresse que pour la livraison :</label>
    <input type="checkbox" id="billing_is_shipping" name="billing_is_shipping" onchange="javascript:toggleBilling()" checked>
    <br>
    <input type="text" name="billing_name" placeholder="Nom" disabled>
    <input type="text" name="billing_address" placeholder="Addresse" disabled>
    <input type="text" name="billing_zipCode" placeholder="Zip Code" disabled>
  </fieldset>
</form>

Avec un peu de JavaScript :

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

Fera que tous les champs texte désactivés dans le formulaire de facturation auront une couleur de fond gris clair.

Spécifications

Spécification Statut Commentaire
WHATWG HTML Living Standard
La définition de ':disabled' dans cette spécification.
Standard évolutif Pas de modification.
HTML5
La définition de ':disabled' dans cette spécification.
Recommendation Définit la sémantique en rapport avec HTML et les formulaires.
Selectors Level 4
La définition de ':disabled' dans cette spécification.
Version de travail Pas de modification.
CSS Basic User Interface Module Level 3
La définition de ':disabled' dans cette spécification.
Version de travail Lie vers Selectors Level 3.
Selectors Level 3
La définition de ':disabled' dans cette spécification.
Recommendation Définit la pseudo-classe, mais pas la sémantique associée.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 1.0 (1.7 ou moins) 9.0 9.0 3.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 1.0 (1) 9.0 9.5 3.1

Voir également

Étiquettes et contributeurs liés au document

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