CSS :read-only Selector

What You’ll Learn

The :read-only pseudo-class styles form fields users can view but not edit. It helps you visually distinguish locked values from editable inputs in profiles, order forms, and admin panels.

Introduction

The CSS :read-only selector targets form elements in a read-only state — fields where users can see the value but cannot change it. This is usually set with the HTML readonly attribute on <input> or <textarea>.

Unlike disabled fields, read-only inputs can still receive focus, allow text selection, and their values are included when the form is submitted. Styling them clearly helps users understand which fields they can edit.

Definition and Usage

Use :read-only on its own or scoped to a field type: input:read-only or textarea:read-only. Pair it with :read-write to style editable fields in the same form.

📝 Syntax

The syntax for the :read-only pseudo-class is:

:read-only {
  /* CSS properties */
}

The :read-only pseudo-class targets form controls that cannot be edited by the user.

Basic Example

:read-only {
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  cursor: default;
}

:read-write {
  background-color: #fff;
  border: 2px solid #cbd5e1;
  color: #1e293b;
}

:read-only vs :disabled

Syntax Rules

• Add the readonly attribute in HTML for the selector to match.
• Pair with :read-write to style editable fields in the same form.
• Scope with element selectors: input:read-only avoids affecting other elements.
• Do not confuse with :disabled — they serve different purposes.
• Read-only values can be set dynamically with JavaScript: element.readOnly = true.

Related Selectors

• :read-write — matches editable form controls
• :disabled — matches inactive, non-interactive controls
• :enabled — matches controls without the disabled attribute
• [readonly] — attribute selector alternative
• :focus — read-only fields can still receive focus

When to Use :read-only

:read-only is ideal for view-only form fields:

• Order IDs and reference numbers — Show locked identifiers users should not change.
• Profile usernames — Display account names that cannot be edited inline.
• Pre-filled data — Highlight server-provided values in edit forms.
• Admin review panels — Distinguish locked system fields from user-editable ones.
• Confirmation screens — Show submitted values in a non-editable summary form.

Examples Gallery

Practice :read-only with basic pairing, scoped selectors, textarea fields, and mixed forms.

<style>
  :read-only {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #64748b;
  }
  :read-write {
    background: #fff;
    border: 2px solid #cbd5e1;
    color: #1e293b;
  }
  input {
    padding: 0.5rem;
    border-radius: 0.4rem;
    width: 100%;
    margin-bottom: 0.75rem;
  }
</style>

<form>
  <label for="ro">Read-only field:</label>
  <input type="text" id="ro" value="This is read-only" readonly>

  <label for="rw">Editable field:</label>
  <input type="text" id="rw" placeholder="You can edit this">
</form>

input:read-only {
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  color: #475569;
  font-family: ui-monospace, monospace;
  cursor: default;
}

textarea:read-only {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  resize: none;
  cursor: default;
}

textarea:read-write {
  background: #fff;
  border: 2px solid #cbd5e1;
  resize: vertical;
}

.profile-form input:read-only {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.profile-form input:read-write {
  background: #fff;
  border: 2px solid #cbd5e1;
  color: #1e293b;
}

.profile-form input:read-write:focus {
  border-color: #3b82f6;
  outline: none;
}

💬 Usage Tips

• Pair with :read-write — Style editable fields distinctly from read-only ones.
• Use readonly, not disabled — When values must still be submitted with the form.
• Allow copy — Read-only fields let users select and copy text; avoid user-select: none.
• Scope selectors — Use input:read-only within form wrappers for targeted rules.
• Set via JavaScript — Toggle with element.readOnly = true for dynamic forms.
• Visual cues — Gray backgrounds, dashed borders, or monospace fonts signal locked values.

⚠️ Common Pitfalls

• Confusing with :disabled — Disabled fields cannot be focused and are not submitted; read-only fields can.
• Missing readonly attribute — Without it, the field stays editable and :read-only won’t match.
• Styling disabled as read-only — Use :disabled for inactive controls, not :read-only.
• Too faint text — Read-only values should remain readable; don’t make contrast too low.
• Buttons and selects — :read-only mainly applies to text inputs and textareas.
• Security misconception — readonly prevents casual editing but is not server-side protection.

♿ Accessibility

• Keep text readable — Read-only fields should meet WCAG contrast requirements.
• Explain locked fields — Use label text like “Order ID (cannot be changed)” for clarity.
• Allow focus — Users can tab to read-only fields and copy values; don’t block keyboard access.
• Don’t mimic disabled — If a field is read-only, avoid cursor: not-allowed which implies it’s inactive.
• aria-readonly — For custom widgets, consider aria-readonly="true" alongside visual styling.

💡 Best Practices