# CSS `:read-only` and `:read-write` Pseudo-classes

The `:read-only` and `:read-write` pseudo-classes allow you to style elements based on their editability.

## 1. `:read-only`

The `:read-only` pseudo-class represents an element that is not editable by the user.

*   **Matches:**
    *   Inputs with the `readonly` attribute.
    *   Inputs with the `disabled` attribute (in most browsers).
    *   Regular elements (like `<div>`, `<p>`) that are not `contenteditable`.

```css
/* Style inputs that cannot be edited */
input:read-only {
  background-color: #eee;
  cursor: default;
}
```

## 2. `:read-write`

The `:read-write` pseudo-class represents an element that is editable by the user.

*   **Matches:**
    *   Inputs (`text`, `number`, `email`, etc.) that are not `readonly` and not `disabled`.
    *   `<textarea>` elements that are not `readonly` and not `disabled`.
    *   Any element with the `contenteditable` attribute set.

```css
/* Highlight editable areas */
:read-write {
  outline: 1px dashed blue;
}

/* Specifically target contenteditable divs */
div:read-write {
  background-color: white;
  padding: 10px;
}
```

## 3. `:read-only` vs. `:disabled`

While they often look similar, there is a semantic difference:
*   **`:disabled`**: The element is non-functional. Its value is not submitted.
*   **`:read-only`**: The element is functional (can be focused, value is submitted), but the user cannot change the value.

*Note: Browsers generally consider `:disabled` inputs to also be `:read-only`, but not all `:read-only` inputs are `:disabled`.*

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/css/disabled-and-enabled-pseudo-classes]]