: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 thereadonlyattribute set, not thedisabledattribute.<textarea>s that are neither read-only nor disabled (similar to theinputs).- Any other element that is not an
<input>or a<textarea>, and that has thecontenteditableattribute 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;
}
Examples
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.
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.
Notes
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.
