:in-range
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
:in-range は CSS の擬似クラスで、現在の値が min および max 属性による制限範囲内にある <input> 要素を表します。
css
/* 入力範囲が設定されていて、値がその範囲に該当する
<input> 要素をすべて選択 */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
試してみましょう
label {
display: block;
margin-top: 1em;
}
input:in-range {
background-color: palegreen;
}
<form>
<label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
<input id="amount" name="amount" type="number" min="2" max="6" value="4" />
<label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
<input
id="dep"
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 id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>
この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。
メモ: この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
構文
:in-range
例
HTML
html
<form action="" id="form1">
<ul>
1 から 10 の間の値が有効です。
<li>
<input
id="value1"
name="value1"
type="number"
placeholder="1 to 10"
min="1"
max="10"
value="12"
required />
<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: "範囲外です！";
}
結果
仕様書
| Specification |
|---|
| HTML # selector-in-range |
| Selectors Level 4 # in-range-pseudo |