CSS3 :disabled Pseudo-class

Definition and Usage

CSS :disabled Pseudo-classes are used to select and set the styles of any disabled element (mainly used for form elements).

Tip::enabled Pseudo-classes are used to select and set the styles of any enabled element (mainly used for form elements).

Example

Example 1

Set the light gray background color for all disabled <input> elements, and set the yellow background color for all enabled <input> elements:

input:disabled {
background-color: lightgray;
}
input:enabled {
background-color: yellow;
}

Try It Yourself

Example 2

Set the background color for all disabled <option> elements:

option:disabled {
  background-color: lightgray;
}

Try It Yourself

CSS Syntax

:disabled {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version to fully support the pseudo-class.

Related Pages

Reference:CSS :enabled pseudo-class