:read-only Back

• :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.
  • <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" cols="30" rows="10" readonly></textarea>

<div class="random"></div>

Case: test :read-only

See the Pen PZgGGY by aleen42 (@aleen42) on CodePen.

Note

• 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.
• In Opera, elements that are editable using the contenteditable attribute are treated as read-only because it does not support the contenteditable attribute.
• In Chrome, elements editable using the contenteditable attribute do not match :read-write, and hence are not selected with :read-write. They don't match the :read-only selector either, how they are treated is unknown. Same applies to regular elements that are not editable with contenteditable, they don't match either of the two pseudo-class selectors.