The :read-only pseudo-class matches elements whose contents cannot be changed by the user. It is broader than an input carrying readonly; ordinary noneditable elements can match too. Scope a form rule to the intended input or textarea. CSS cannot make a value authoritative merely by painting it as fixed.
Make this comfortable
CSS :read-only: distinguish fixed values from disabled controls
When to use it
A shipment audit form shows a registered parcel code that the reviewer may inspect and copy but cannot edit in that request. The HTML field uses readonly, and CSS gives it a restrained surface distinct from an editable note. The browser can still focus a read-only text control and can submit its value, unlike a disabled control. Keep a proper label and an explanation of why the field is fixed. Test Tab order, text selection, copy, forced colors, server submission, and a programmatic change attempted outside the UI. Server code must read the authoritative parcel record rather than trust any submitted value. Do not apply a broad :read-only selector to every div and paragraph, since those are usually noneditable and could all receive the field treatment. If a control truly should not participate in a submission, choose the right HTML state before styling it.
.shipment-review input:read-only, .shipment-review textarea:read-only { background: #edf3f5; border: 1px solid #6b818c; color: #173441; }
.shipment-review input:read-write, .shipment-review textarea:read-write { background: #fff; border: 1px solid #426375; }
.shipment-review :focus-visible { outline: 3px solid #1c5e87; outline-offset: 2px; }Cost and verification
The selectors have trivial cost. Maintenance risk comes from confusing state, semantics, and security. Readonly is supported only by certain controls; setting the attribute on a select does not create an equivalent fixed selection. A muted background can look disabled, so verify that users still understand the field can be focused and copied. Avoid reducing contrast with opacity. Read-only fields are not validated like ordinary editable required fields, and a client can still modify requests. CSS neither enforces the state nor protects the server. Test the actual rendered control across browsers and keep the visual difference secondary to the text label and native behavior.
Common Mistakes
- Do not use an unscoped :read-only rule across the document.
- Do not confuse readonly submission with disabled omission.
- Do not treat CSS or a readonly attribute as server authorization.
Connected lessons
css
reference
web