CSS Selector Level 4 » Mutability pseudo-class

The pseudo-class mutability represents elements whose contents is user-alterable or not. :read-only represents the biggest part of a site: the non-alterable content. :read-write represents input elements which are user-alterable or with the in HTML5 newly introduced contenteditable attribute which allows the user to edit content.

Syntax

Copy
:read-only {
    /* declarations */
}

:read-write {
    /* declarations */
}

Example

Copy
:read-only {
    font-family: Verdana, Arial, sans-serif;
}
 
:read-write {
    font-family: Trebuchet MS, Times New Roman, sans-serif;
    border: 1px dotted gray;
}

In the above mentioned code all non-alterable content is going to have the font Verdana, Arial, sans-serif while the editable inputs or contenteditable content is going to have a different font with a dotted gray border.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (32) Yes (36) Yes (8) No No Yes (14)
Mobile No Yes (36) Yes (9) No No No

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera