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