:read-only and :read-write
:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。
css
input:read-only, textarea:read-only { background-color: #ccc; }
p:read-only { background-color: #ccc; }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 13 | 78 | 4 | 18 | 3.2 | |
| その他 | ||||||
| `:読み書き` | 1 | 13 | 78 | 4 | 18 | 3.2 |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1.5)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1.5)
基本構文
CSS
input:read-only {
background-color: #f5f5f5;
border-color: #ddd;
}
input:read-write {
border-color: #3498db;
}ライブデモ
実務での使いどころ
-
読み取り専用フィールドの視覚表示
編集不可のフォームフィールドをグレーアウトして表示し、ユーザーに編集可否を直感的に伝えます。
注意点
- :read-onlyはreadonly属性がない通常の非フォーム要素にもマッチするため、セレクターの範囲を意識してください。
アクセシビリティ
- 読み取り専用フィールドにはaria-readonly属性も併用し、支援技術でも状態が正しく伝わるようにしてください。