CSS :enabled & :disabled Selectors

The CSS :enabled selector selects every enabled element (frequently used on form elements).

Syntax:

:enabled {
  CSS declarations;
}

The CSS :disabled selector selects every disabled element (frequently used on form elements). You can not insert any additional data into the form.

Syntax:

:disabled {
  CSS declarations;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
  background: #e9c46a;
}

input[type=text]:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  First name: <input type="text" value="John"><br>
  Last name: <input type="text" value="Doe"><br>
  Occupation: <input type="text" disabled="disabled" value="Web Developer">
</form>

</body>
</html>

Output:

Enjoy coding!

Share this: