# CSS `:enabled` and `:disabled` Pseudo-classes

The `:enabled` and `:disabled` pseudo-classes represent user interface elements (like form inputs) that are in an enabled or disabled state.

## 1. `:enabled`

The `:enabled` pseudo-class represents any element that can be enabled or disabled and is currently enabled.
*   An element is enabled if it can be activated (e.g., selected, clicked on, typed into) or accept focus.
*   This is the default state for most form elements.

```css
/* Style all enabled inputs */
input:enabled {
  background-color: white;
}
```

## 2. `:disabled`

The `:disabled` pseudo-class represents any element that can be enabled or disabled and is currently disabled.
*   An element is disabled if it cannot be activated (e.g., selected, clicked on, typed into) or accept focus.
*   Disabled elements are usually rendered with a "grayed-out" look by the browser.
*   **Important:** Values of disabled form elements are **not submitted** with the form.

```css
/* Style all disabled inputs */
input:disabled {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
  border: 1px solid #ccc;
}
```

## 3. Applicable Elements

These pseudo-classes apply to elements that support the `disabled` attribute:
*   `<button>`
*   `<input>`
*   `<textarea>`
*   `<select>`
*   `<optgroup>`
*   `<option>`
*   `<fieldset>`

## 4. `:disabled` vs. `[readonly]`

It is important to distinguish between disabled and read-only states.

*   **Disabled (`:disabled`)**:
    *   Cannot be focused.
    *   Cannot be modified.
    *   Value is **not** submitted.
    *   Often removed from the tab order.
*   **Read-only (`:read-only` / `[readonly]`)**:
    *   **Can** be focused.
    *   Cannot be modified.
    *   Value **is** submitted.
    *   User can still select/copy text.

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/css/selectors]]