CSS :read-write Pseudo Class - Learn CSS

The :read-write CSS pseudo-class matches any element that the user can edit, such as a text field they can type into. It is a user-action / input pseudo-class: it targets elements based on their current editable state rather than on a tag name or class, so you can style "the box the visitor can write in" without adding extra markup.

This page covers what counts as a read-write element, the syntax, a working example, the read-only counterpart, and how :read-write fits with related form pseudo-classes.

What counts as read-write

An element matches :read-write when it is currently editable. That includes:

<input> elements whose type accepts text (text, search, url, email, password, number, etc.) that are not readonly and not disabled.
<textarea> elements that are neither readonly nor disabled.
Any other element that carries the contenteditable attribute (e.g. a <div contenteditable>), which makes otherwise static content editable.

The opposite case — a disabled field, a readonly field, or any non-editable element such as a paragraph — matches :read-only instead. Every element is one or the other, so :read-only and :read-write together cover the whole document.

When to use it

Reach for :read-write when you want a visual cue that an element is interactive:

Give editable fields a distinct background or border so users instantly see where they can type.
Pair it with :read-only to fade out fields that are locked (for example, a profile form where the email is fixed but the display name is editable).
Style a contenteditable rich-text region the same way as native inputs for a consistent look.

Info

Browser support for the :read-write pseudo-class is broad in modern browsers, but the styling behaviour can differ. The element's actual editable state is always correct — :read-write only controls whether your styles are applied — so never rely on it for anything other than presentation.

The :read-only selector is the counterpart of the :read-write selector. It selects every element that does not match :read-write.

Version

HTML5

Selectors Level 4

Syntax

CSS :read-write syntax example

:read-write {
  css declarations;
}

Here css declarations are the style rules to apply to every editable element on the page. You will usually scope the rule (for example input:read-write) so it does not also catch contenteditable regions you would rather leave alone.

Example of the :read-write selector

In the example below the first input is editable, so it turns green via :read-write. The second input is readonly, so it falls to the :read-only rule and is greyed out.

CSS :read-write 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;
      }
      :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>

Try it Yourself »

Styling a contenteditable region

:read-write is not limited to form fields. Any element with the contenteditable attribute becomes editable and therefore matches :read-write, so you can give it the same affordance as a real input:

<!DOCTYPE html>
<html>
  <head>
    <title>contenteditable + :read-write</title>
    <style>
      div:read-write {
        border: 1px dashed #4caf50;
        padding: 8px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <p>Click the box below and start typing:</p>
    <div contenteditable>This text is editable.</div>
  </body>
</html>

Because the <div> carries contenteditable, the div:read-write rule applies and the box gets the dashed border. Remove the attribute and the rule no longer matches.

Browser Compatibility

Browser	Support
Chrome	Yes
Firefox	Yes
Safari	Yes
Edge	Yes
Opera	Yes

:read-only — the counterpart that matches every non-editable element.
:disabled and :enabled — match form controls by their disabled state.
:required and :optional — match inputs by whether they must be filled in.

Practice

Which elements are matched by the :read-write pseudo-class?

A text input that is neither readonly nor disabledA textarea with the readonly attributeA div with the contenteditable attributeA disabled input fieldA plain paragraph with no special attributes