: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 ⁨2020年7月⁩.

:read-write はCSS の擬似クラスで、ユーザーが編集できる要素 (input やtextarea など) を表します。

css

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

試してみましょう

label,input[type="submit"] {  display: block;  margin-top: 1em;}*:read-write {  background-color: ivory;  border: 2px solid darkorange;  border-radius: 5px;}

<p>Please fill in your details:</p><form>  <label for="email">Email Address:</label>  <input name="email" type="email" value="test@example.com" />  <label for="note">Short note about yourself:</label>  <textarea name="note">Don't be shy</textarea>  <label for="pic">Your picture:</label>  <input name="pic" type="file" />  <input type="submit" value="Submit form" /></form>

構文

: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;}