「:in-range」と「:out-of-range」は、input要素において、値がmin属性とmax属性で指定された範囲内にある場合と無い場合に、範囲の制限を持つ要素をスタイルするために使用されるCSS擬似クラスです。

サンプルは、18歳から30歳までの範囲の求人を想定し、年齢を入力するよう求めるinput要素です。入力値が範囲内なら入力欄が緑で、「入力の確認：」の後に青色で「募集範囲内です。」と表示されます。入力値が範囲外なら入力欄がピンクで、「入力の確認：」の後に濃いピンクで「募集範囲外です。」と表示されます。

なお、古めのGoogle Chromeでは「input:out-of-range + label::after」がうまく動作せず、「募集範囲外です。」が出ない場合があるようです。

サンプル

サンプルのhtmlソース

<form action="" id="sample">
  <p>年齢を入力してください（18歳から30歳まで）。</p>
  <input id="age" name="age" type="number" placeholder="18 to 30" min="18" max="30">
  <label for="age">入力の確認：</label>
</form>

サンプルのCSSソース

input:out-of-range {
  background-color: #fbe;
  border: 2px solid #e49;
  }
input:out-of-range + label::after {
  content: '募集範囲外です。';
  color: #e49;
  }
input:in-range {
  background-color: #9f9;
  border: 2px solid #59b;
  }
input:in-range + label::after {
  content: '募集範囲内です。';
  color: #37d;
  }