:read-write / :read-only

:read-write and :read-only are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky.

According to the official CSS Specifications, is considered :read-write an element which is:

  • either an input which is neither readonly nor disabled
  • or a textarea which is neither readonly nor disabled
  • or any other editable element (thanks to contenteditable)

Syntax & Example

/* Any element that is not writable */
:read-only { }

/* ... so you might want to scope it */
[contenteditable]:read-only {
  cursor: not-allowed;

/* Any enabled text input 
   or enabled textarea 
   or element with the contenteditable attribute */
:read-write {
  background: white;
  cursor: text;

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox

There is a major difference between what is recommended in the specifications and what the browsers actually do. For instance, if we stick to the specs, every element which is user-editable but disabled (disabled or readonly) or simply not user-editable should be targeted by an unqualified :read-only selector.

Chrome Firefox Safari Opera
input :read-write :read-write :read-write :read-write
input[disabled] :read-write :read-write :read-write :read-write
input[readonly] :read-only :read-only :read-only :read-only
[contenteditable] :read-write :read-only
* :read-only :read-only

Meanwhile, only Firefox seems to do so, and apparently not too well either since it considers a disabled input as :read-write. Regarding Opera not tagging a contenteditable element as :read-write, it's simply because it doesn't support contenteditable.

See the Pen 7791cf88b4c02879ad29ccc3b0266319 by Hugo Giraudel (@HugoGiraudel) on CodePen.


  1. User Avatar
    Permalink to comment#

    Excellent article Chris!

  2. User Avatar
    Matt Wojo
    Permalink to comment#

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.