:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

:read-writeCSS擬似クラスで、ユーザーが編集できる要素 (inputtextarea など) を表します。

css
input:read-write,
textarea:read-write {
  background-color: #bbf;
}

p:read-write {
  background-color: #bbf;
}

試してみましょう

構文

:read-write

読み取り専用/読み書きコントロールによるフォーム情報の確認

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

フォーム以外の読み書き用コントロールのスタイル付け

このセレクターは <input>/<textarea> 要素に readonly が設定されているものだけを選択するのではありません。ユーザーが編集できるあらゆる要素、例えば <p> 要素に contenteditable が設定されたものを選択します。

html
<p contenteditable>この段落は編集可能です。読み書き可です。</p>

<p>この段落は編集できません。読み取り専用です。</p>
css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

仕様書

Specification
HTML
# selector-read-write
Selectors Level 4
# read-write-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:read-write

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報