:read-only and :read-write
The :read-only CSS pseudo-class selects elements (such as certain <input> types and <textarea>) that are not editable by the user. Elements on which the HTML attribute readonly doesn't have an effect (such as <input type="radio">, <input type="checkbox">, and all other non-form elements) are also selected by the :read-only pseudo-class. In fact, :read-only matches anything that :read-write doesn't match, making it equivalent to :not(:read-write).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 13 | 78 | 4 | 18 | 3.2 | |
| Other | ||||||
| `:read-write` | 1 | 13 | 78 | 4 | 18 | 3.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -moz- (1.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -moz- (1.5)
Syntax
CSS
input:read-only {
background-color: #f5f5f5;
border-color: #ddd;
}
input:read-write {
border-color: #3498db;
}Live demo
Use cases
-
Using :read-only and :read-write
The :read-only CSS pseudo-class selects elements (such as certain <input> types and <textarea>) that are not editable by the user.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.