← Back to pseudo-classes

CSS Pseudo-class / Element

:read-only

Form

Selects elements that cannot be modified by the user.

Syntax

input:read-only { }

Example

input:read-only { background: #1a1a1a; color: #555; }

Common use cases

Styling read-only form fields differently
Displaying non-editable data in a form
Visually distinguishing editable from static fields

Practical developer insight

:read-only also matches non-form elements like regular divs and paragraphs — use it on input:read-only to be specific to form fields.

Related

:disabled :focus :required