CSS :read-write Pseudo Class

The :read-write selector selects elements which are 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-write selector works differently in different browsers. In one browser it can be considered read-write, but in another, it can be considered read-only. In some browsers, the style may not be applied.

The :read-only selector is the counterpart of the :read-write selector. It selects all elements not match :read-write.

Version

HTML5

Selectors Level 4

Syntax

:read-write {
  css declarations;
}

Example of the :read-write 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;
      }
      #read-write:read-write {
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>:read-write selector example</h2>
    <form>
      <div>
        <label for="read-write">Example1</label>
        <input value="read-write input" id="read-write">
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only">
      </div>
    </form>
  </body>
</html>