CSS :read-only Pseudo Class

CSS :read-only Pseudo-Class

The :read-only pseudo-class selects form fields or elements that are not editable by the user. It helps apply styles specifically to fields with the readonly attribute, distinguishing them from editable fields.

1. Syntax

input:read-only {
  background-color: #f0f0f0;
  border: 2px solid gray;
}

✅ This applies a gray border and light gray background to read-only input fields.

2. Example – Styling Read-Only Fields

<form>
  <label for="name">Name (Editable):</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email (Read-only):</label>
  <input type="email" id="email" name="email" value="user@example.com" readonly>
</form>

input:read-write {
  border: 2px solid green;
  background-color: #e6ffe6;
}

input:read-only {
  border: 2px solid gray;
  background-color: #f0f0f0;
  color: darkgray;
}

✅ Editable fields get a green border and light green background.
✅ Read-only fields get a gray border and gray background.

3. :read-only vs :read-write

Pseudo-Class	Targets
:read-only	Input fields with the readonly attribute
:read-write	Editable fields (input, textarea, contenteditable)

input:read-write {
  color: black;
}

input:read-only {
  color: gray;
  font-style: italic;
}

✅ Helps differentiate editable vs. non-editable fields.

4. :read-only with textarea

The readonly attribute can also apply to textarea elements.

<textarea readonly>This text cannot be edited.</textarea>

textarea:read-only {
  background-color: #ddd;
  border: 1px solid gray;
}

✅ Prevents user input but allows copying and selecting the text.

5. Browser Support

✅ Fully supported in Chrome, Firefox, Edge, and Safari.
❌ Not supported in Internet Explorer.

6. Best Practices

✔ Use :read-only to style non-editable fields for better UX.
✔ Combine with :read-write for clearer visual distinction.
✔ Works great for display-only form elements.