CSS:read-only 疑似クラスは、ユーザーが編集できない要素(ロックされた入力欄など)を表します。

/* 読み取り専用の <input> 要素を選択 */
/* Firefox では接頭辞付きで対応 */
input:-moz-read-only {
  background-color: #ccc;
}

/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-only {
  background-color: #ccc;
}

メモ: このセレクターは <input> 要素に readonly が設定されているものだけを選択するのではありません。ユーザーが編集できないあらゆる要素を選択します。

構文

:read-only

HTML

<input type="text" value="ここに何でも好きなものを入力してください。">
<input type="text" value="これは読み取り専用の入力欄です。" readonly>
<p>これは普通の段落です。</p>
<p contenteditable="true">この段落は編集できます!</p>

CSS

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:read-only の定義
現行の標準 変更なし。
HTML5
:read-only の定義
勧告 HTML に関する意味を定義。
Selectors Level 4
:read-only の定義
草案 疑似クラスを定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり -moz- 1 なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? あり あり あり -moz- 1 ? ? あり

1. See bug 312971 for unprefixed status.

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,