: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;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The :disabled pseudo-class is supported in Chrome, Firefox, safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.
