:read-onlyは、フォーム要素が読み取り専用（編集不可）の場合に、その要素に対して適用されるスタイルを指定する擬似クラスです。フォーム内で値を変更できないフィールドに、視覚的な区別をつけたい場合に便利です。
INDEX
:read-onlyの値とその効果の一覧
:read-only: フォーム要素が読み取り専用のときに適用されるスタイルを指定します。
注意点と関連情報
:read-onlyは、input、textareaなどのフォーム要素に適用されます。
読み取り専用の属性（readonly）が設定されている要素のみ対象となり、スタイルが適用されます。
disabled属性を持つ要素には適用されないため、disabledとreadonlyの違いに注意してください。
:read-onlyが効かない理由として考えられること
対象の要素がフォーム要素でない
:read-onlyは、主にフォーム要素（<input>、<textarea>など）の読み取り専用状態に適用されます。これら以外の要素には適用されません。
対策：対象の要素がフォーム要素であり、かつreadonly属性が正しく設定されていることを確認します。フォーム以外の要素には、この擬似クラスは適用されないため、必要に応じて適切なクラスやスタイルで制御します。
readonly属性が設定されていない
:read-onlyは、readonly属性が設定された要素に対してのみ適用されます。readonly属性がないフォーム要素には、この擬似クラスは機能しません。
対策：対象のフォーム要素にreadonly属性が正しく設定されているか確認します。例: <input type="text" readonly>のように指定します。
表示例
CSS:read-only
この例では、readonly属性が付いた入力フィールドに対して、背景色を淡い灰色にし、ボーダーの色を薄いグレーに変更します。また、テキストの色も変更して、読み取り専用であることが視覚的に分かるようにしています。
HTMLコード
<div class="css-sample-container">
<input type="text" class="css-sample-input" value="編集可能">
<input type="text" class="css-sample-input css-sample-read-only" value="読み取り専用" readonly>
</div>
CSSコード
.css-sample-read-only:read-only {
background-color: #f0f0f0;
border-color: #999;
color: #555;
}
表示結果
まとめ
- :read-onlyは、読み取り専用のフォーム要素に対してスタイルを指定できる。
- フォーム要素に
readonly属性がある場合にのみ適用される。 disabledとは異なり、読み取り専用ではあるが要素はアクティブで、選択が可能である。