:read-only編集不可能な要素にスタイルを適用する
:read-only 疑似クラスは、閲覧者が編集できない要素にスタイルを適用します。多くの場合、readonly 属性が付与された input 要素や textarea 要素に使用されますが、セレクタ自体は「閲覧者が編集できない要素」すべてに適用されるため注意が必要です。
例えば、contenteditable="true" が付与されていない p 要素や div 要素なども「閲覧者が編集できない要素」です。
:read-onlyのサンプルソース
input:read-only,
textarea:read-only {
background-color: #dddddd;
}
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |