Customizing Styles for Enabled and Disabled Form Elements

Enabled & disabled Classes

In CSS, the :enabled and :disabled pseudo-classes are used to select and style HTML form elements based on their enabled or disabled state. These pseudo-classes are particularly useful for customizing the appearance of form elements to provide visual feedback to users or to indicate the interactability of form controls.

:enabled Pseudo-Class: This pseudo-class selects form elements that are currently enabled or active for user interaction. In other words, it targets form controls that a user can interact with, such as input fields, buttons, checkboxes, and radio buttons that are not disabled.

:disabled Pseudo-Class: Conversely, the :disabled pseudo-class selects form elements that are currently disabled or inactive for user interaction. This includes elements that have the disabled attribute set or are programmatically disabled through JavaScript.

This CSS code targets and styles <input> elements based on their enabled and disabled states using the :enabled and :disabled pseudo-classes.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input pseudo-classes</title>
    <style>
      input:enabled {
        background-color: #bbed95;
      }
      input:disabled {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h3>Input pseudo-classes</h3>
    <p>:enabled & :disabled</p>
    <input type="text" />
    <input type="text" disabled />
  </body>
</html>

Live Preview

input:enabled: This selector targets all <input> elements that are enabled or active for user interaction. It applies the specified style when the input elements are in an enabled state. background-color: #bbed95;: This style declaration sets the background color of enabled <input> elements to a pale green color (#bbed95).

input:disabled: This selector targets all <input> elements that are disabled or inactive for user interaction. It applies the specified style when the input elements are in a disabled state. background-color: pink;: This style declaration sets the background color of disabled <input> elements to pink.