:out-of-range

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

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

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

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

構文

:out-of-range

HTML

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

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: '範囲外です!';
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
:out-of-range の定義
現行の標準 いつ HTML が :out-of-range に該当するかを定義。
Selectors Level 4
:out-of-range の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:out-of-rangeChrome 完全対応 10Edge 完全対応 13Firefox 完全対応 29IE 未対応 なしOpera 完全対応 11Safari 完全対応 5.1WebView Android 完全対応 2.3Chrome Android 完全対応 18Firefox Android 完全対応 16Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報