:disabled

The pseudo-class :disabled specifies styles for an inactive input. Inactive means an input that has the attribute set to disabled.

 

The :disabled pseudo-class is used to select any disabled elements. An element is disabled if it cannot be activated (for example, it cannot be selected, clicked, or typed) or receive focus.

Syntax

/* Select the <input> field that has been disabled */

input:disabled {
  background: red;
}

Example

Example Form (not disabled)
Example Form (disabled)
<form action="#">
<fieldset id="form-not-disabled">
    <legend>Example Form (not disabled)</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Surname" />
</fieldset>

<fieldset id="form-disabled">
    <legend>Example Form (disabled)</legend>
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Surname" disabled />
</fieldset>
</form>

input[type='text']:disabled {
  background: #f3f3f3;
}