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

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 section below, and view the live demo for a live example of how your browser treats the elements.

The :read-write selector has a similar counterpart which is the :read-only entry.

Just like other pseudo-class selectors, the :read-write selector can be chained with other selectors such as :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;
}
                

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

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