:read-write

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

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

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

構文

:read-write

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

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

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

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 が設定されたものを選択します。

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

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

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

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

仕様書

仕様書 状態 備考
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 完全対応 78
完全対応 78
完全対応 1.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 9Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報