:out-of-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年11月.

:out-of-range はCSS の擬似クラスで、<input> 要素のうち、現在の値がmin およびmax 属性で指定された範囲を外れているものを表します。

css

/* 入力範囲が設定されていて、値がその範囲外である   <input> 要素をすべて選択 */input:out-of-range {  background-color: rgba(255, 0, 0, 0.25);}

試してみましょう

label {  display: block;  margin-top: 1em;}input:out-of-range {  background-color: orangered;}

<form>  <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>  <input name="amount" type="number" min="2" max="6" value="4" />  <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>  <input       name="dep"    type="date"    min="2022-01-01"    max="2022-12-31"    value="2025-05-05" />  <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>  <input name="ret" type="date" min="2022-01-01" max="2022-12-31" /></form>

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

メモ:この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

構文

:out-of-range

例

HTML

html

<form action="">  <p>1 から 10の間の値が有効です。</p>  <ul>    <li>      <input               name="value1"        type="number"        placeholder="1 to 10"        min="1"        max="10"        value="12" />      <label for="value1">あなたの値は</label>    </li>  </ul></form>

CSS

css

li {  list-style: none;  margin-bottom: 1em;}input {  border: 1px solid black;}input:in-range {  background-color: rgba(0, 255, 0, 0.25);}input:out-of-range {  background-color: rgba(255, 0, 0, 0.25);  border: 2px solid red;}input:in-range + label::after {  content: "範囲内です。";}input:out-of-range + label::after {  content: "範囲外です！";}