mozilla
Vos résultats de recherche

    :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

    Contributors to this page: teoli, tregagnon, FredB
    Dernière mise à jour par : tregagnon,