The :read-only pseudo-class matches elements the user cannot edit. On text fields that usually means the HTML readonly attribute. It is the complement of :read-write — equivalent to :not(:read-write).
Common use: style confirmation fields (name, address) so they look like fixed text while still submitting with the form.
Supported across modern browsers (MDN: widely available since July 2020). Prefer scoped selectors such as input:read-only — a bare :read-only also matches many non-form elements.
:read-only { /* styles */ }Example: input:read-only { background: #e2e8f0; }.
:read-only has no values — it is a state. Typical matches:
:read-onlyMark the field in HTML, then style the state in CSS.
readonly to the input or textarea (and keep a meaningful value).input:read-only or textarea:read-only — not a bare * unless you intend to.:read-write when the same form has editable fields too.| Piece | Required? | Role |
|---|---|---|
readonly attribute | For form fields | Makes text controls non-editable but submittable |
:read-only rule | Yes | Visual treatment for locked fields |
| Scoped selector | Recommended | Avoid styling every non-editable node on the page |
:read-write | Optional | Highlight fields that are still editable |
Toggle readonly on the sample input. The muted style applies only while it matches :read-only.
Short patterns for locked form fields. Use Try It Yourself for a live editor.
Mute a confirmation email field.
<style>
input:read-only {
background: #e2e8f0;
border: 1px solid #cbd5e1;
color: #334155;
}
</style>
<label>
Email
<input type="email" value="[email protected]" readonly>
</label>readonly locks the field without disabling it.input:read-only matches that locked state.disabled.Show a fixed address block for review.
<style>
textarea:read-only {
background: #f1f5f9;
border: 0;
resize: none;
}
</style>
<label>
Address
<textarea readonly>23 Elastic Way
Bright Ridge, CA</textarea>
</label>textarea + readonly locks multi-line text.textarea:read-only styles only locked areas.:read-writeContrast locked and editable fields in one form.
<style>
input:read-only {
background: #e2e8f0;
}
textarea:read-write {
outline: 1px dashed #dc2626;
}
</style>
<input type="text" value="Mr Soft" readonly>
<textarea>Add instructions</textarea>:read-only → muted fill.:read-write → dashed outline.Scope carefully — :read-only is broader than “has readonly=”.
Buttons, selects, and normal paragraphs are not :read-write, so they match :read-only. Prefer input:read-only / textarea:read-only.
:disabledRead-only can be focused and is submitted. Disabled is skipped on submit. Use :disabled when the control must be fully inactive.
Muted styles still need readable contrast. Pair with a clear label so users know the value is intentional, not broken.
A plain <p> matches :read-only; contenteditable content matches :read-write. Useful for rich-text demos — unexpected if you style globally.
:read-only 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-write for form UX. Internet Explorer had incomplete / prefixed support historically.
Bottom line: Safe for modern form styling. Scope to input/textarea. This is not a JavaScript runtime API.
readonly fields).input:read-only { background: …; }.:read-only hits many non-form nodes.One line: :read-only paints locked (but submittable) fields — mute them, don’t confuse them with disabled.
Learn how to style elements the user can edit.
5 people found this page helpful