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 の定義
草案 疑似クラスを定義、但し意味の結びつけの定義はなし

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 312971 for unprefixed status.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 See bug 312971 for unprefixed status.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連項目

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

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