Last updated on

:read-write and :read-only are two mutability pseudo-classes aiming at making form styling easier based on disabledreadonly 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

Chrome Safari Firefox Opera IE Android iOS
Yep Yep Yep (-moz-) 14+ Nope Nope Yep

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 adisabled input as :read-write. Regarding Opera not tagging a contenteditableelement as :read-write, it’s simply because it doesn’t support contenteditable.

Leave a Reply

Your email address will not be published. Required fields are marked *