mozilla
Your Search Results

    :disabled

    Summary

    The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

    Examples

    Example selectors

    input:disabled
    Selects all disabled inputs
    select.country:disabled
    Targets a select element with class country that is disabled

    Usage example

    The following CSS:

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

    Applied to this HTML5 fragment:

    <form action="#">
      <fieldset>
        <legend>Shipping address</legend>
        <input type="text" name="shipping_name" placeholder="Name">
        <input type="text" name="shipping_address" placeholder="Address">
        <input type="text" name="shipping_zipCode" placeholder="Zip Code">
      </fieldset>
      <fieldset id="billing">
        <legend>Billing address</legend>
        <label for="billing_is_shipping">Same as shipping address:</label>
        <input type="checkbox" name="billing_is_shipping" onchange="javascript:toggleBilling()" checked>
        <br />
        <input type="text" name="billing_name" placeholder="Name" disabled>
        <input type="text" name="billing_address" placeholder="Address" disabled>
        <input type="text" name="billing_zipCode" placeholder="Zip Code" disabled>
      </fieldset>
    </form>
    

    With a little 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;
        }
    }
    

    Will result in all disabled text elements in the billing fieldset having a light grey background.

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of ':disabled' in that specification.
    Living Standard No change.
    HTML5
    The definition of ':disabled' in that specification.
    Recommendation Defines the semantic regarding HTML and forms.
    Selectors Level 4
    The definition of ':disabled' in that specification.
    Working Draft No change.
    CSS Basic User Interface Module Level 3
    The definition of ':disabled' in that specification.
    Working Draft Link to Selectors Level 3.
    Selectors Level 3
    The definition of ':disabled' in that specification.
    Recommendation Defines the pseudo-class, but not the associated semantic.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1) 9.0 9.5 3.1

    See also

    Document Tags and Contributors

    Last updated by: pwntastic,