CSS Reference Pseudo-class

:disabled

:disabled is a pseudo-class selector used to select and style user interface elements (usually form elements) that are disabled.

That is, it matches elements such as buttons (<button>), select menus (<select>), input types (<input>), and textareas (<textarea>), for example, that have the disabled attribute set and thus cannot be interacted with by the user.

<input type="submit" disabled> <!-- disabled attribute added as a boolean value -->
<!-- OR -->
<input type="submit" disabled="disabled"> <!-- disabled attribute added with a "disabled" value -->
                

The disabled attribute is an HTML5 attribute that can be set to the elements: <button>, <input>, <textarea>, <optgroup>, <option>, and <fieldset>. Such elements, when disabled, don’t accept user interactions such as clicks, text input, or focus.

Trivia & Notes

Disabled elements also have a corresponding enabled state. The enabled state can be styled using the :enabled pseudo-class.

CSS properties that might affect a user’s ability to interact with a given user interface element do not affect whether it matches :enabled or :disabled; e.g., the display and visibility properties have no effect on the enabled/disabled state of an element, even if they are set to hide the element.

Just like other pseudo-class selectors, the :disabled selector can be chained with other selectors such as :hover, for example, to provide hover styles for disabled elements. See the examples and live demo sections below for examples.

Examples

/* styles all disabled elements on a page */
:disabled {
    background-color: #aaa;
    color: grey;
    border: 1px solid grey;
}

/* styles disabled submit inputs on a page */
input[type="submit"]:disabled {
    background: #eee url(path/to/disabled.png) repeat-x;
    border: 1px solid grey;
}
                

The following example chains pseudo-selectors :disabled and :hover to style the cursor when a disabled button is hovered, showing a “Not Allowed” sign.

button:disabled:hover {
    cursor: not-allowed;
}
                

Browser Support

The :disabled pseudo-class is supported in Chrome, Firefox, safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.

Written by

Last updated February 3, 2015 at 12:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.