CSS :read-only Selector

CSS :read-only selector selects every element on a page that is not editable by the user. It can be any element like a input, textarea, paragraph, div etc.

Elements that are not editable fall into the following three categories:

  • <input> elements that either have a readonly attribute or disabled
  • <textarea> elements that either have a readonly attribute or disabled same as inputs
  • Any other element except the input and textarea that do not have the contenteditable attribute

It means the :read-only selector will select any element that falls into any of these three categories.

The :read-only selector in the following example sets a pink background to those input elements that have the declared as read-only:


    background: pink;

Here is one more example that sets a pink background to the read-only textarea fields:


    background: pink;

You can also select other non-editable elements like paragraphs, divs, lists, etc. But the condition is that they must not have the contenteditable attribute.

See this example:


    background: pink;
    background: yellow;

CSS Syntax

The syntax of the :read-only selector is as follows:

   CSS Styles;

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :read-only selector.



  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.