CSS Reference Pseudo-class

:read-write

:read-write is a CSS pseudo-class selector that matches elements that are editable by the user.

Elements that fall into the editable category include:

  • <input> elements (of any type) that are not read-only and that are not disabled. This means that they have neither the readonly attribute set, not the disabled attribute.
  • <textarea>s that are neither read-only nor disabled (similar to the inputs).
  • Any other element that is not an <input> or a <textarea>, and that has the contenteditable attribute set.

The following are examples of elements that can be selected using :read-write:

<input type="text">

<input type="number">

<textarea name="nm" id="id" cols="30" rows="10"> </textarea>

<div class="random" contenteditable> </div>
                

The following are examples of elements that can not be selected using :read-write:

<input type="text" disabled>

<input type="number" disabled>

<input type="number" readonly>

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

<div class="random"> </div> <!-- regular element that is not editable with contenteditable -->
                

Despite this being the behavior recommended by the specification, browser behaviors seem to differ—what is considered read-write in one browser is considered read-only in another, and therefore styles you apply using :read-write may not be applied in some browsers. For more information about this, please refer to the Browser Support section below, and view the live demo for a live example of how your browser treats the elements.

Trivia & Notes

The :read-write selector has a similar counterpart which is the :read-only pseudo-class selector which, as the name suggests, selects all elements that do not match :read-write. You can read more about it in the :read-only entry.

Just like other pseudo-class selectors, the :read-write selector can be chained with other selectors such as :hover and with pseudo-elements such as ::after, among others. For example, the following rule will provide :focus styles for an editable text area:

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}
                

Examples

The following will select all elements on a page that are editable using the contenteditable attribute, and apply a green border to them.

[contenteditable]:read-write {
    border: 1px solid green;
}
                

The following will select all input and text area fields that are editable and apply focus styles to them:

input:read-write:focus, textarea:read-write:focus {
    box-shadow: 0 0 3px 1px rgba(0, 0, 100, .2);
}
                

Live Demo

The following demo applies a green border to elements that match :read-write, and applies a red border to elements that are read-only (i.e. that match :read-only). Elements that don’t match either of the two pseudo-class selectors have a gray border. The result may differ depending on the browser you’re using. See the Browser Support section below for details.

View this demo on the Codrops Playground

Browser Support

The :read-write pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS.

It is supported with the -moz- prefix in Firefox in the form :-moz-read-write.

The :read-write selector is not supported in Internet Explorer and on Android.

Notes

In Chrome, Firefox, Safari, and Opera, inputs that are disabled (have the disabled attribute set) are still treated as read-write, unlike what the spec says.

Written by

Last updated March 17, 2017 at 12:33 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.