W3docs
en
Log in

CSS :read-only Pseudo Class

The :read-only CSS pseudo-class selects the elements that are not editable. Read about the pseudo-class and try examples.

The :read-only selector selects elements that are not editable by the user.

Read only selector example

Elements that are editable include:

  • <input> elements that are not read-only and that are not disabled.
  • <textarea> that is neither read-only nor disabled.
  • An element that is not an <input> or a <textarea>, and that has the contenteditable attribute set to true.

Conversely, :read-only matches these elements when the contenteditable attribute is false or absent.

The :read-only selector can be linked with other selectors (e.g. :hover) and with pseudo-elements (e.g. ::after).

Version

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Syntax

CSS :read-only syntax

:read-only {
  css declarations;
}

Example of the :read-only selector:

CSS :read-only code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 5px;
      }
      input:read-only {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <form>
      <div>
        <label for="normal">Example1</label>
        <input value="normal input" id="normal" />
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only" />
      </div>
    </form>
  </body>
</html>
Try it Yourself »

The contenteditable enumerated attribute indicates if the user can edit the element. When enabled, the browser widget is modified to allow editing. The attribute should have one of the following values:

  • true (or the empty string), indicating that the element should be editable;
  • false, indicating that the element should not be editable.

Example of the :read-only selector with contenteditable attribute:

Example of CSS :read-only pseudo class with contenteditable attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:read-only {
        background: #8ebf42;
      }
      p[contenteditable="true"] {
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <p>Example of a normal paragraph.</p>
    <p contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</p>
  </body>
</html>
Try it Yourself »

Example of the :read-only selector with HTML <textarea> tag on hover:

Example of the CSS :read-only selector with HTML <textarea> tag and on hover case

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea:read-only {
        background: #ffffff;
      }
      textarea:read-only:hover {
        cursor: not-allowed;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <textarea cols="40" rows="5" readonly>Here is an example of :read-only selector on hover.</textarea>
  </body>
</html>
Try it Yourself »

Example of the :read-only selector with HTML <div> tag and the :after, :before pseudo-elements:

Example CSS :read-only Pseudo Class with :before, :after pseudo-elements

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:read-only:hover {
        background-color: #eee;
      }
      div:read-only:before,
      div:read-only:after {
        content: " / ";
        padding: 10px;
        color: #1c87c9;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <div readonly>Here is an example of :read-only selector on hover.</div>
    <br />
    <div contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</div>
  </body>
</html>
Try it Yourself »

Practice

Practice

What does the CSS :read-only pseudo-class select?