CSS:read-write 疑似クラスは、ユーザーが編集できる要素(入力欄など)を表します。

/* 編集できる <input> 要素を選択 */
/* Firefox では接頭辞付きで対応 */
input:-moz-read-write {
  background-color: #bbf;
}

/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-write {
  background-color: #bbf;
}

メモ: このセレクターは <input> 要素だけを選択するものではありません。 <p> 要素に contenteditable が設定されているものなど、ユーザーが編集できるあらゆる要素を選択します。

構文

:read-write

HTML

<input type="text" value="ここに何でも好きなものを入力してください。">
<input type="text" value="これは読み取り専用の入力欄です。" readonly>
<p>これは普通の段落です。</p>
<p contenteditable="true">この段落は編集できます!</p>

CSS

input { min-width: 25em; }
input:-moz-read-write { background: cyan; }
input:read-write { background: cyan; }

p:-moz-read-write { background: lightgray; }
p:read-write { background: lightgray; }
p[contenteditable="true"] { color: blue; }

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:read-write の定義
現行の標準 変更なし。
HTML5
:read-write の定義
勧告 HTML に関する意味を定義。
Selectors Level 4
:read-write の定義
草案 疑似クラスを定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり -moz- 1 なし あり あり
Matches editable elements that are neither <input> elements nor <textarea> elements なし なし あり なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? あり あり あり -moz- 1 ? ? あり
Matches editable elements that are neither <input> elements nor <textarea> elements なし なし なし あり なし なし なし

1. See bug 312971 for unprefixed status.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,