CSS :read-write Pseudo Class

CSS :read-write Pseudo-Class

The :read-write pseudo-class selects input fields or elements that are editable by the user. It helps apply styles specifically to editable form fields while ignoring readonly elements.

1. Syntax

input:read-write {
  background-color: #f0f8ff;
}

✅ This applies a light blue background to editable input fields.

2. Example – Highlight Editable Inputs

<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;
}

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

3. Styling contenteditable Elements

The :read-write pseudo-class also applies to elements with contenteditable="true".

<div contenteditable="true">You can edit this text.</div>
<div contenteditable="false">This text is not editable.</div>

div:read-write {
  outline: 2px dashed blue;
  background-color: #eef;
}

✅ Editable <div> elements get a dashed blue outline.

4. :read-write vs :read-only

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

input:read-write {
  color: black;
}

input:read-only {
  color: gray;
}

✅ Helps differentiate editable vs. non-editable fields.

5. Browser Support

✅ Supported in all modern browsers (Chrome, Firefox, Edge, Safari).
❌ Not supported in Internet Explorer.

6. Best Practices

✔ Use :read-write to highlight interactive fields.
✔ Combine with :read-only for better form usability.
✔ Works great for content-editable elements.