:read-only / :read-write

Mutability

The mutability pseudo-classes represents elements whose contents are, or are not user-alterable.

:read-only

The :read-only pseudo-class represents an element that is not user-alterable.

:read-write

The :read-write pseudo-class represents an element that is user-alterable. This could be an input element or a contenteditable element (HTML5 attribute).

Browser Support (tested using latest versions)

Desktop
Google Chrome
Yes
Mozilla Firefox
-moz
Safari
Yes
Opera Browser
Yes
Internet Explorer
No
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
No
Safari iOS
No
Opera Mobile
No
IE Mobile
No

Syntax

E:read-only { /* Style properties */ }
E:read-write { /* Style properties */ }

/* The following are the browser supported versions of the mutability pseudo-classes. */

E:-moz-read-only { /* Firefox */ }
E:-moz-read-write { /* Firefox */ }

Example

/* In this example, most elements (read-only) will simply have a normal font. Read-write elements will have a monospace font with a gray border. */

:read-only {
font-family: Arial, Helvetica, sans-serif;
}

:read-write {
border: 1px solid gray;
font-family: "Courier New", Courier, monospace;
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.