:read-only is a CSS pseudo-class selector that matches any element that does not match the :read-write selector. 1v6a1a

In other words, it matches elements that are not editable by the . 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 :read-only pseudo-class selector matches any element that is not one of the above.

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

<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 -->
                

The following are examples of elements that can not be selected using :read-only—these are the element than 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>
                

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. 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.

Just like other pseudo-class selectors, the :read-only selector can be chained with other selectors such as :hover styles for a (regular) div on the page:

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}
                

.element:read-only:after {
    content: "Subscribe!";
    /* ... */
}

input:read-only {
    background-color: #aaa;
    border: 1px solid #888;
}

textarea:read-only:hover {
    cursor: not-allowed;
}