Home » Programming » Css » Read Only And Read Write Pseudo Classes
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
1 min read

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.
/* Style inputs that cannot be edited */
input:read-only {
  background-color: <a href='/?search=%23eee' class='obsidian-tag'>#eee</a>;
  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.
/* 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

Created: March 17, 2026 • Last Modified: February 1, 2026