coderef

:read-only and :read-writeBaseline · Widely available

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.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 28, 2020. Widely available since Jan 28, 2023.

Browser support

DesktopChrome
1+Supportedsince Dec 11, 2008
Current: 155
Edge
12–12Not supported
13+Supportedsince Nov 12, 2015
Current: 154
Firefox
1–77Not supported
78+Supportedsince Jun 30, 2020
Current: 157
Safari
1–3.1Not supported
4+Supportedsince Jun 8, 2009
Current: 27
MobileChrome Android
18+Supportedsince Jun 27, 2012
Current: 155
Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157
Safari iOS
1–3Not supported
3.2+Supportedsince Apr 3, 2010
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: :read-only.

Feature detection

CSS · check before using
@supports selector(:read-write) {
  /* styles that use :read-write */
}

/* or in JavaScript */
if (CSS.supports("selector(:read-write)")) {
  // use it
}

Sub-features

Support for each part of the feature (2). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
read-only11378418793.2
read-write11378418793.2