The :Disabled and :Enabled Pseudo-Classes

The :disabled selector matches every disabled element, while the :enabled selector does the same for every enabled element (mostly used on form elements). This example sets background colors for disabled and enabled input elements of type="text":

HTML file: Displayed by browser:
<style>
input [type=text]:enabled {
    background: yellow;
}
input [type=text]:disabled {
    background: lightgrey;
}
</style>
<body>
<form action="">
  First name: <input type="text" value="Mickey">
<br /><br />
  Last name: <input type="text" value="Mouse">
<br /><br />
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
</body>
First name:

Last name:

Country:

All disabled input text types have lightgrey backgrounds, while the enabled types have yellow backgrounds.

Back button Table of Contents Next button