: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.

:in-rangeCSS擬似クラスで、現在の値が min および max 属性による制限範囲内にある <input> 要素を表します。

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

試してみましょう

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

メモ: この擬似クラスは範囲制限を持つ(または設定できる)要素にのみ適用されます。そのような制限がない場合は、要素は "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: "範囲外です!";
}

結果

メモ: 空の <input> は範囲外としてカウントされず、 :out-of-range 擬似クラスセレクターで選択されることはありません。空の入力を選択するための :blank 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 required 属性と :invalid 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (:invalid は空白および範囲外の入力のスタイルを指定します)。

仕様書

Specification
HTML
# selector-in-range
Selectors Level 4
# in-range-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:in-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報