CSS :read-only Pseudo Class

❮ Prev Next ❯

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

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.

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

The :read-only pseudo-class selector is supported with the -moz- prefix in Firefox in the following form: -moz-read-only.

Version

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Syntax

:read-only {
  css declarations;
}

Example of the :read-only selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 5px;
      }
      input:-moz-read-only {
        background-color: #ccc;
      }
      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 »

An enumerated attribute indicates if the user can edit the element. In such a case, 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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:-moz-read-only {
        background: #8ebf42;
      }
      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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea:-moz-read-only {
        background: #ffffff;
      }
      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:

<!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>