:read-only

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。

css

input:read-only,
textarea:read-only {
  background-color: #ccc;
}

p:read-only {
  background-color: #ccc;
}

試してみましょう

構文

:read-only

例

読み取り専用/読み書きコントロールによるフォーム情報の確認

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

css

input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

フォーム以外の読み取り専用コントロールのスタイル付け

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

html

<p contenteditable>この段落は編集可能です。読み書き可です。</p>

<p>この段落は編集できません。読み取り専用です。</p>

css

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

仕様書

Specification
HTML Standard # selector-read-only
Selectors Level 4 # rw-pseudos

ブラウザーの互換性

BCD tables only load in the browser