: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 and visibility properties have no effect on the enabled/disabled state of an element, even if they are set to hide the element.

Copyright © aleen42 all right reserved,powered by GitbookUpdated time: 2016-10-09 06:25:23