CSS :read-only Pseudo Class

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>

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>

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>

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>

Browser support

36.0+ 13.0+ 3.0+ 9.0+ 23.0+

Practice Your Knowledge

The :read-only selector selects



Do you find this helpful?

Related articles