: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;
}