:read-only and :read-write

概要

:read-onlyと:read-writeは、フォーム要素の編集可否に基づいてスタイルを適用する擬似クラスです。:read-onlyはreadonly属性を持つ<input>や<textarea>にマッチし、:read-writeは編集可能な要素にマッチします。フォームの状態に応じたビジュアルフィードバックを提供し、ユーザーがどのフィールドを編集できるかを明確に示す際に活用されます。

対応ブラウザ

基本構文

input:read-only {
  background-color: #f5f5f5;
  border-color: #ddd;
}
input:read-write {
  border-color: #3498db;
}

実務での使いどころ

• 読み取り専用フィールドの視覚表示

  編集不可のフォームフィールドをグレーアウトして表示し、ユーザーに編集可否を直感的に伝えます。

注意点

アクセシビリティ

• 読み取り専用フィールドにはaria-readonly属性も併用し、支援技術でも状態が正しく伝わるようにしてください。

参考リンク

• MDN Web Docs — :read-only and :read-write
• Can I use — :read-only and :read-write