CSS :read-only Selector

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:

The :read-only selector selects elements which are "readonly".Form elements with a "readonly" attribute are defined as "readonly".

  • <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.
  • Any other element that is not an <input> or a <textarea>, and that has the contenteditable attribute set.
  • <textarea>s that are neither read-only nor disabled (similar to the inputs).

The :read-only CSS pseudo-class represents an element (such as a locked text input) that is not editable by the user.

:read-only {css declarations;}

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:

Example -