The :read-write pseudo-class matches elements the user can edit — typically input / textarea without readonly (and not disabled), plus contenteditable content.
Pair it with :read-only when a form mixes locked confirmation fields and still-editable ones (for example delivery instructions).
Supported across modern browsers (MDN: widely available since July 2020). Prefer scoped selectors such as textarea:read-write when you only want form controls.
:read-write { /* styles */ }Example: textarea:read-write { outline: 1px dashed #dc2626; }.
:read-write has no values — it is a state. Typical matches:
:read-writeLeave the field editable in HTML, then highlight that state in CSS.
input / textarea (no readonly, not disabled).input:read-write or textarea:read-write.:read-only in the same form.| Piece | Required? | Role |
|---|---|---|
| Editable control | Yes | No readonly / not disabled |
:read-write rule | Yes | Visual cue for writable fields |
| Scoped selector | Recommended | Avoid styling every editable node on the page |
:read-only | Optional | Mute locked fields for contrast |
Toggle between editable and readonly. The dashed outline applies only while the field matches :read-write.
Short patterns for editable fields. Use Try It Yourself for a live editor.
Highlight a writable email field.
<style>
input:read-write {
border: 2px solid #ea580c;
background: #fffbeb;
}
</style>
<label>
Email
<input type="email" value="[email protected]">
</label>readonly — the input stays editable.input:read-write matches that writable state.readonly and the rule stops applying.:read-onlyMute locked address text; emphasize editable instructions.
<style>
textarea:read-only {
border: 0;
background: #f1f5f9;
}
textarea:read-write {
box-shadow: inset 1px 1px 3px #ccc;
}
</style>
<textarea readonly>123 Choco Mountain</textarea>
<textarea>Delivery notes</textarea>readonly → matches :read-only.:read-write.contenteditableNon-form text can also match :read-write.
<style>
p:read-write {
background: #bbf7d0;
}
p:read-only {
background: #fecaca;
color: #7f1d1d;
}
</style>
<p contenteditable>Editable paragraph</p>
<p>Fixed paragraph</p>contenteditable makes the first p user-editable.:read-write → green background.p matches :read-only → red tint.Editable state is the key — disabled and readonly never match.
A disabled control cannot be edited. Style it with :disabled, not :read-write.
readonly flips to :read-onlyAs soon as you add readonly, :read-write stops matching. Use that toggle for confirmation steps.
contenteditable nodes also match. Prefer input:read-write / textarea:read-write for forms.
A decorative outline for :read-write should not replace a clear :focus / :focus-visible indicator.
:read-write is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
Widely available across modern browsers (MDN notes broad support from mid-2020). Pair with :read-only for form UX. Internet Explorer had incomplete / prefixed support historically.
Bottom line: Safe for modern form styling. Scope to input/textarea when needed. This is not a JavaScript runtime API.
:read-only for locked vs editable fields.textarea:read-write { outline: …; }.readonly and disabled never match.One line: :read-write paints “you can type here” — highlight it, and mute the rest with :read-only.
Learn how to style fields that must be completed before submit.
5 people found this page helpful