Mutability :read-only / :read-write

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

Chrome Firefox Safari Opera IE Edge
Desktop yes -moz yes yes no yes
Mobile yes yes no no no yes

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.