CSS :read-write Pseudo-Class

CSS :read-write Pseudo-Class

The CSS :read-write pseudo-class selects elements whose contents or values can be edited by the user. It commonly matches editable <input> and <textarea> elements, as well as elements made editable with the contenteditable attribute.

:read-write Syntax

selector:read-write {
  property: value;
}

The :read-write pseudo-class matches elements that the user can edit.

Basic Example

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

Applies a light blue background to editable input elements.

Textarea Example

textarea:read-write {
  border-color: #006699;
}

Changes the border color of an editable textarea.

Class Selector

.editable-content:read-write {
  outline: 2px solid #006699;
}

Matches an element with the editable-content class when it is user-editable.

Combined Selector

input:read-write,
textarea:read-write {
  background-color: #eaf6fc;
}

Applies the same styling to editable inputs and textareas.

No Parentheses

The :read-write pseudo-class does not accept arguments and is written without parentheses.

How :read-write Works

The browser determines whether an element's contents or value can be changed by the user. The :read-write pseudo-class matches when editing is permitted.

HTML Example

<label for="page-title">Page Title:</label>
<input type="text" id="page-title" value="CSS Basics">

CSS Example

input:read-write {
  background-color: #eaf6fc;
  border: 2px solid #006699;
}

The input receives the editable-state styling because the user can change its value.

Read-Only State

<input type="text" value="CSS Basics" readonly>

The read-only input does not match :read-write because direct editing is prevented.

Automatic State Updates

If an input becomes read-only or editable, the browser updates :read-write and :read-only matching automatically.

Editing Permission vs. Focus

An editable input matches :read-write even when it does not have focus. The selector describes editability, not whether the user is currently typing.

Editable <input> Elements

The :read-write pseudo-class matches editable input controls, including common text-entry types that are not read-only or disabled.

Text Input

<input type="text" placeholder="Enter a page title">

input[type="text"]:read-write {
  background-color: #eaf6fc;
}

The text input matches because the user can enter or change its value.

Email Input

<input type="email" placeholder="name@example.com">

The email input matches while it is editable.

Password Input

<input type="password" placeholder="Enter a password">

The password input matches while the user is permitted to edit its value.

Number Input

<input type="number" value="25">

The number input matches while the user can modify its value.

Date Input

<input type="date" value="2026-11-04">

A date input can match :read-write when its value is editable.

Input Types That Do Not Match

Controls such as checkboxes, radio buttons, and range sliders are not text-editable controls and do not match :read-write merely because their values can be changed through their interfaces.

Editable <textarea> Elements

The <textarea> element matches :read-write while the user can edit its text.

HTML Example

<label for="description">Description:</label>
<textarea id="description" rows="4">Edit this description.</textarea>

CSS Example

textarea:read-write {
  background-color: #eaf6fc;
  border: 2px solid #006699;
}

Applies a light blue background and blue border to an editable textarea.

Read-Only Textarea

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

The read-only textarea matches :read-only instead of :read-write.

Disabled Textarea

<textarea disabled>Editing is unavailable.</textarea>

The disabled textarea does not match :read-write.

Placeholder Text

An editable textarea can match both :read-write and :placeholder-shown while its placeholder is displayed.

Contenteditable Elements

The HTML contenteditable attribute allows ordinary elements to become editable. These elements can match :read-write even though they are not form controls.

Editable Div

<div class="editable-content" contenteditable="true">
  Edit this text directly.
</div>

CSS Example

.editable-content:read-write {
  padding: 12px;
  border: 2px solid #006699;
  background-color: #eaf6fc;
}

Applies editable-state styling to the div.

Non-Editable Div

<div class="editable-content" contenteditable="false">
  This text cannot be edited.
</div>

The non-editable div matches :read-only.

Inherited Editability

<div contenteditable="true">
  <p>This paragraph is editable through its parent.</p>
</div>

Descendants can inherit editability from an editable ancestor. An element does not need its own contenteditable attribute to be editable.

Plaintext Editing

<div contenteditable="plaintext-only">
  Edit this text without rich-text formatting.
</div>

The plaintext-only value allows text editing without preserving rich-text formatting during paste operations in supporting browsers.

Contenteditable Is Not a Form Field

An editable div does not automatically participate in form submission like a named input or textarea. Additional code is needed when its content must be submitted.

The readonly Attribute

The HTML readonly attribute prevents users from directly editing supported form controls and changes whether they match :read-write.

Editable Input

<input type="text" value="Editable value">

This input matches :read-write.

Read-Only Input

<input type="text" value="Read-only value" readonly>

This input matches :read-only instead.

CSS Comparison

input:read-write {
  background-color: #eaf6fc;
}
input:read-only {
  background-color: #f2f2f2;
}

Applies different backgrounds to editable and non-editable inputs.

Attribute Selector vs. Pseudo-Class

input:not([readonly]) {
  border-color: #006699;
}
input:read-write {
  background-color: #eaf6fc;
}

The first selector matches inputs without the readonly attribute, including input types that are not text-editable. The second selector matches inputs that are actually editable.

Boolean Attribute

The readonly attribute is boolean. Its presence enables the read-only state for supported controls, regardless of a value such as readonly="false".

Disabled Controls

Disabled controls cannot be edited through normal user interaction and do not match :read-write.

HTML Example

<input type="text" value="Editable value">
<input type="text" value="Disabled value" disabled>

CSS Example

input:read-write {
  background-color: #eaf6fc;
}
input:disabled {
  background-color: #ddd;
  opacity: 0.6;
}

The editable input receives the light blue background, while the disabled input receives the disabled styling.

Disabled vs. Read-Only

A read-only text control can normally receive focus and be submitted with a form. A disabled control normally cannot receive focus and is excluded from form submission.

Enabled Is Not the Same as Editable

An enabled checkbox can match :enabled without matching :read-write. The enabled state and text editability describe different characteristics.

Styling Disabled Controls

Use :disabled when the purpose is to identify disabled controls rather than all non-editable elements.

Focus and Editing

The :read-write pseudo-class describes whether an element can be edited, while focus pseudo-classes describe the current focus state.

Editable Without Focus

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

Matches editable inputs even when they are not focused.

Focused Editable Input

input:read-write:focus {
  border-color: #006699;
  outline: 2px solid #006699;
  outline-offset: 2px;
}

Matches an input that is both editable and focused.

Keyboard Focus

input:read-write:focus-visible {
  outline: 3px solid #006699;
  outline-offset: 2px;
}

Provides a visible focus indicator when the browser determines that one is appropriate.

Editable Content Areas

[contenteditable="true"]:focus {
  outline: 2px solid #006699;
}

Highlights a contenteditable element while it has focus.

Focus Does Not Guarantee Editability

Read-only inputs can normally receive focus. Use :read-write when the styling must specifically depend on editability.

JavaScript and Editability

JavaScript can inspect or change whether a supported form control is editable. CSS responds automatically when the state changes.

Check the Read-Only Property

const input = document.getElementById("demo-input");
console.log(input.readOnly);

The readOnly property reports whether the input's read-only state is enabled.

Make an Input Read-Only

input.readOnly = true;

The input stops matching :read-write when its supported read-only state is enabled.

Make an Input Editable

input.readOnly = false;

The input can match :read-write again when it is enabled and editable.

Check the CSS State

console.log(input.matches(":read-write"));

The matches() method checks whether the element currently matches the pseudo-class.

Change Contenteditable State

const editor = document.getElementById("text-editor");
editor.contentEditable = "true";

Enables editing for a contenteditable element. Setting the property to "false" disables editing for that element.

Automatic CSS Updates

When JavaScript changes an element's editability, the browser updates :read-write and :read-only matching without requiring additional CSS classes.

Related Pseudo-Classes

The :read-write pseudo-class describes editability. Other pseudo-classes describe whether controls are read-only, enabled, focused, required, or valid.

Comparison

Read-Write vs. Read-Only

input:read-write {
  background-color: #eaf6fc;
}
input:read-only {
  background-color: #f2f2f2;
}

These selectors provide different styles for editable and non-editable inputs.

Read-Write vs. Enabled

An enabled control is not necessarily text-editable. Use :read-write when editability is the intended condition.

Read-Write vs. Focus

An editable field does not need focus to match :read-write. Use :focus or :focus-visible for focus-dependent styling.

:read-write Specificity

The :read-write pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

input {
  background-color: #fff;
}
input:read-write {
  background-color: #eaf6fc;
}

When both rules match and other cascade factors are equal, the :read-write rule takes precedence because it has greater specificity.

Combined Pseudo-Classes

input:focus:read-write {
  border-color: #006699;
}

Both pseudo-classes contribute to specificity, resulting in 0-2-1.

Practical Uses

The :read-write pseudo-class is useful for identifying and styling form controls and content areas that users can edit.

Editable Input Background

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

Highlights editable input controls.

Editable Textarea Border

textarea:read-write {
  border-color: #006699;
}

Applies a blue border to editable textareas.

Contenteditable Area

.editable-content:read-write {
  padding: 12px;
  background-color: #eaf6fc;
}

Highlights an editable content area.

Editable Focus Indicator

input:read-write:focus-visible {
  outline: 3px solid #006699;
}

Provides a clear keyboard focus indicator for editable inputs.

Editable Container

.form-field:has(input:read-write) {
  border-color: #006699;
}

Styles a container when it contains an editable input.

Limitations

The :read-write pseudo-class describes editability, not every kind of user interaction or value change.

Not Every Interactive Control Matches

Checkboxes, radio buttons, and range sliders can be changed by users, but they are not text-editable controls and do not match :read-write merely because they are enabled.

Not a Focus Selector

An editable input matches :read-write whether or not it has focus.

Not a Validation Selector

The pseudo-class does not indicate whether a field contains valid data. Use validation pseudo-classes for that purpose.

Not a Required-Field Selector

An editable field can be required or optional. Use :required and :optional to distinguish those states.

Does Not Enable Editing

The pseudo-class only matches editable elements. It cannot make an element editable.

Contenteditable Form Submission

Contenteditable elements do not automatically submit their contents as form values.

Browser Behavior

Some specialized form controls may have browser-specific editing interfaces. Test the intended control types when relying on editability-based styling.

Best Practices

• Use :read-write to style form controls and content areas that users can edit.
• Combine it with input, textarea, or a specific class to target the intended elements.
• Use :read-only for non-editable elements.
• Use :disabled when specifically styling disabled controls.
• Do not assume every enabled form control matches :read-write.
• Provide visible labels for editable form controls.
• Maintain clear focus indicators for keyboard users.
• Use contenteditable only where direct content editing is intended.
• Remember that contenteditable elements do not automatically participate in form submission.
• Test changes between editable, read-only, and disabled states.

:read-write Example

This example includes an editable input, a read-only input, and an editable content area. Editable elements receive a light blue background and blue border. Use the button to switch the second input between read-only and editable states.

HTML

<div class="readwrite-demo">
  <label for="demo-title">Page Title</label>
  <input type="text" id="demo-title" value="CSS Basics">
  <label for="demo-code">Reference Code</label>
  <input type="text" id="demo-code" value="CSS-104" readonly>
  <button type="button" id="toggle-editable">Make Editable</button>
  <p class="editor-label">Editable Content</p>
  <div class="editable-content" contenteditable="true" role="textbox" aria-label="Editable Content" aria-multiline="true">Edit this text directly.</div>
</div>

CSS

.readwrite-demo label,
.readwrite-demo .editor-label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}
.readwrite-demo input,
.readwrite-demo .editable-content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 2px solid #ccc;
  background-color: #f2f2f2;
}
.readwrite-demo input:read-write,
.readwrite-demo .editable-content:read-write {
  border-color: #006699;
  background-color: #eaf6fc;
}
.readwrite-demo button {
  margin-top: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.readwrite-demo .editable-content {
  min-height: 50px;
}

JavaScript

const input = document.getElementById("demo-code");
const button = document.getElementById("toggle-editable");
button.addEventListener("click", () => {
  input.readOnly = !input.readOnly;
  button.textContent = input.readOnly ? "Make Editable" : "Make Read-Only";
});

Browser Result

Play in Editor

Note: The Page Title input and editable content area start with blue styling because they are editable. Click Make Editable to allow changes to the Reference Code input and apply the same styling. Click Make Read-Only to restore its original state.

Browser Support

Baseline: Widely available. The :read-write pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Older browser versions may differ in their handling of certain editable elements.

For current compatibility information, visit Can I Use? and search for :read-write.

Specifications

The :read-write pseudo-class is defined in CSS Selectors Level 4 as a mutability pseudo-class. It matches elements whose contents or values are user-editable.

Selectors Level 4 - Mutability Pseudo-Classes