CSS Reference Pseudo-class


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

In other words, it matches elements that are not 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 :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 may not be applied in some browsers, and styles you apply using :read-only may be applied to elements that should match :read-write. 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

Just like other pseudo-class selectors, the :read-only 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 :hover styles for a (regular) div on the page:

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

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


The following are all valid :read-only declarations:

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

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

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

Live Demo

The following demo applies a red border to elements that match :read-only, and applies a green border to elements that match :read-write. 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-only pseudo-class selector is supported in Chrome, Edge, Safari, and Opera 14+, and on iOS.

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

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


In Chrome, Firefox, Safari, and Opera, inputs that are disabled (have the disabled attribute set) are treated as read-write not as read-only, unlike what the spec says. So, disabled elements will not match :read-only in these browsers even if they should.

Written by . Last updated March 17, 2017 at 12:31 pm by Manoela Ilic.

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