CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:read-onlyセレクタで読み取り専用のinput要素にスタイルを適用する方法

フォーム内で編集できない「読み取り専用」の要素を選択したい場合は、CSSの :read-only セレクタを使用します。このセレクタは、readonly 属性が設定された <input> 要素など、ユーザーが値を変更できない要素にのみスタイルを適用します。

:read-onlyセレクタの基本

:read-only は擬似クラスの一つで、readonly 属性を持つ入力フィールドを自動的に判別します。逆に、編集可能な要素を選択したい場合は :read-write セレクタを使います。両者を組み合わせることで、閲覧専用フィールドと入力可能フィールドを視覚的に明確に区別でき、ユーザーの操作性とフォームの分かりやすさが向上します。

実装例

以下のコードでは、readonly 属性が付いた入力欄だけが青い背景に白文字で表示され、通常の編集可能な入力欄とは異なる見た目になります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:read-only {
            background-color: blue;
            color: white;
         }
      </style>
   </head>
   <body>
      <form>
         Subject: <input type = "text" name = "subject" value = "Maths"><br>
         Student: <input type = "text" name = "student" readonly value = "Amit"><br>
      </form>
   </body>
</html>

コードのポイント

  • 1つ目の「Subject」入力欄には readonly 属性がないため、通常のスタイル（編集可能）で表示されます。
  • 2つ目の「Student」入力欄には readonly 属性が付いているため、input:read-only のルールが適用され、青背景・白文字になります。
  • 読み取り専用フィールドは見た目上グレー表示にするのが一般的ですが、デザインに合わせて自由にカスタマイズできます。

なお、主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）はすべて :read-only セレクタに対応しているため、特別な互換性対策なしで安心して使用できます。フォームのUXを向上させたい場合に、ぜひ活用してみてください。

  1. CSSでinput要素のプレースホルダーテキストをスタイリングする方法

    HTMLの<input>要素のプレースホルダー(placeholder)テキストをCSSでカスタマイズするには、擬似要素(pseudo-element)をターゲットに指定する必要があります。これを実現するのが、CSSの擬似セレクターである::です。 通常のinput要素とプレースホルダーテキスト まずは、プレースホルダー付きのシンプルなinput要素を見てみましょう。 ブラウザのデフォルトスタイルでは、プレースホルダーテキストは次のように表示されます。 CSSでプレースホルダーの色を変更する それでは、::placeholderセレクターを使って、プレースホルダーのテキストを赤

  2. CSSの:validセレクターで有効な値を持つinput要素をスタイリングする方法

    CSSの:validセレクターを使用すると、有効な値が入力されたすべての<input>要素に対してスタイルを適用できます。 :validセレクターとは :validセレクターは、フォームの入力内容がバリデーション（妥当性チェック）を通過した場合にのみスタイルを適用する擬似クラスです。たとえば、type=emailの入力欄に正しい形式のメールアドレスが入力されたときだけ、背景色や文字色を変えるといった使い方ができます。逆に、無効な値が入力された場合にスタイルを適用したい場合は「:invalid」セレクターを使用します。両者を組み合わせることで、ユーザーに入力の正誤を視覚的にフィードバ