:disabled Back
: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 -->
Case: chain selector with hover
<input type="submit" value="Submit">
:disabled {
background-color: #aaa;
color: grey;
border: 1px solid grey;
}
input[type="submit"]:disabled:hover {
cursor: not-allowed;
}
See the Pen eJGBGW by aleen42 (@aleen42) on CodePen.
Note
- The
disabled
attribute is an HTML5 attribute that can be set to the elements:<button>
,<input>
,<textarea>
,<optgroup>
,<option>
, and<fieldset>
. - In comparison,
:enabled
is to enable elements as a enabled state. - The
display
andvisibility
properties have no effect on the enabled/disabled state of an element, even if they are set to hide the element.