:read-write

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

/* 編集できる <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 の定義
草案 疑似クラスを定義、但し意味の結びつけの定義はなし

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:read-writeChrome 完全対応 1Edge 完全対応 13Firefox 完全対応 1.5
接頭辞付き 補足
完全対応 1.5
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 312971 for unprefixed status.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 312971 for unprefixed status.
Opera Android 完全対応 ありSafari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
Matches editable elements that are neither <input> elements nor <textarea> elementsChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 1.5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報