CSS :read-write Selector

What You’ll Learn

The :read-write pseudo-class styles form fields users can edit. Pair it with :read-only to give editable inputs a bright, interactive look that stands out from locked values.

Introduction

The CSS :read-write selector targets form elements that users can edit — fields where they can type, paste, or modify content. It matches <input> and <textarea> elements that are not marked readonly or disabled.

It is the counterpart to :read-only. Use :read-write to highlight fields users should interact with, making forms clearer and more intuitive.

Definition and Usage

Use :read-write on its own or scoped: input:read-write or textarea:read-write. Combine with :focus for enhanced focus styling on editable fields.

📝 Syntax

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

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

The :read-write pseudo-class targets form controls that accept user input and are not locked or disabled.

Basic Example

:read-write {
  background-color: #eff6ff;
  border: 2px solid #3b82f6;
  color: #1e293b;
}

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

:read-write vs :read-only

Syntax Rules

• Matches inputs and textareas without readonly or disabled.
• Pair with :read-only for complete editable vs locked styling.
• Combine with :focus: input:read-write:focus for focus rings.
• Scope with element selectors: input:read-write for targeted rules.
• Does not typically apply to select or button elements.

Related Selectors

• :read-only — matches non-editable form controls
• :disabled — matches inactive, non-interactive controls
• :enabled — matches controls without the disabled attribute
• :focus — matches the currently focused editable field
• :optional — matches non-required form fields

When to Use :read-write

:read-write is ideal for highlighting editable form fields:

• Mixed edit forms — Brighten fields users can change alongside locked system values.
• Profile settings — Style editable display name, bio, and email fields.
• Comment boxes — Give writable textareas a clear interactive appearance.
• Onboarding wizards — Draw attention to fields awaiting user input.
• Focus enhancement — Combine with :focus for polished keyboard navigation.

Examples Gallery

Practice :read-write with basic pairing, focus rings, textarea styling, and complete forms.

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

<form>
  <input type="text" placeholder="Enter username">
  <textarea placeholder="Write about yourself"></textarea>
  <input type="text" value="Read-only value" readonly>
</form>

input:read-write {
  background: #fff;
  border: 2px solid #cbd5e1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  transition: box-shadow 0.2s ease;
}

input:read-write:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

textarea:read-write {
  background: #fff;
  border: 2px solid #cbd5e1;
  color: #1e293b;
  resize: vertical;
  min-height: 5rem;
}

textarea:read-only {
  background: #f1f5f9;
  resize: none;
}

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

.signup-form input:read-write:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  outline: none;
}

.signup-form input:read-only {
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  color: #64748b;
}

💬 Usage Tips

• Pair with :read-only — Always style both states in mixed forms for clear contrast.
• Add :focus styling — Use input:read-write:focus for accessible focus rings.
• Scope selectors — Use input:read-write within form wrappers.
• Bright = editable — White backgrounds and colored borders signal interactivity.
• Exclude disabled — Disabled fields won’t match; style them with :disabled.
• Test mixed forms — Verify readonly, editable, and disabled fields each get correct styles.

⚠️ Common Pitfalls

• Confusing with :enabled — :enabled only checks disabled; :read-write also excludes readonly.
• Missing :read-only pair — Styling only editable fields leaves locked fields looking interactive.
• Select dropdowns — :read-write behavior on select varies; test cross-browser.
• Disabled fields — They do not match :read-write; use :disabled instead.
• Over-bright styling — Editable fields should stand out but still meet contrast guidelines.
• Security — Visual styling does not prevent editing; use server validation.

♿ Accessibility

• Visible focus — Always provide a clear focus indicator on :read-write:focus.
• Label all fields — Editable and read-only fields both need <label> elements.
• Don’t rely on color alone — Pair visual cues with clear label text.
• Keyboard navigation — Ensure tab order reaches all editable fields.
• Explain locked fields — Label text like “Invite code (pre-filled)” helps screen reader users.

💡 Best Practices