Widely availableSupported across all major browsers. Safe to use in production.
Interaction Widely available

:read-only and :read-write

The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.

Interaction

Overview

The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:read-only
1
13
78
4
18
3.2
Other
css.selectors.read-write

`: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

:read-write(editable)

CSS:read-write(editable) demo.

PreviewFullscreen

:read-only(read-only)

CSS:read-only(read-only) demo.

PreviewFullscreen

contenteditable

CSS Contenteditable demo.

PreviewFullscreen

Use cases

  • Using :read-only and :read-write

    The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features