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

CSSの:in-rangeセレクターで指定範囲内の値を持つinput要素にスタイルを適用する方法

CSSの:in-rangeセレクターとは

CSSの:in-range疑似クラスを使用すると、min属性とmax属性で指定された範囲内の値を持つ<input>要素にスタイルを適用できます。数値入力フィールドに入力された値が有効な範囲内にある場合に、ユーザーへ視覚的なフィードバックを与えたい場面で特に便利です。

実装例

以下のコードでは、:in-rangeセレクターを使って、範囲内の値が入力されたときに入力フィールドの枠線と背景色を変更しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:in-range {
            border: 3px dashed orange;
            background: yellow;
         }
      </style>
   </head>
   <body>
      <input type = "number" min = "5" max = "10" value = "9">
      <p>このスタイルは、入力された値（この例では9）が指定範囲内にある場合にのみ適用されます</p>
   </body>
</html>

コードのポイント

  • type="number"： 数値専用の入力フィールドを作成します。
  • min="5" / max="10"： 入力値の有効範囲を5〜10に設定しています。
  • :in-range： 入力値がこの範囲内にある場合に、オレンジ色の破線ボーダーと黄色の背景が適用されます。

なお、逆に入力値が範囲外の場合にスタイルを適用したい場合は、:out-of-range疑似クラスを使用します。両者を組み合わせることで、フォーム入力の正誤を直感的に伝えるUIを実現できます。

  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」セレクターを使用します。両者を組み合わせることで、ユーザーに入力の正誤を視覚的にフィードバ