:read-only
: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 thereadonly
attribute set, not thedisabled
attribute.<textarea>
s that are neither read-only nor disabled (similar to theinput
s).- Any other element that is not an
<input>
or a<textarea>
, and that has thecontenteditable
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; }
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, input
s 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.