CSS:out-of-range 疑似クラスは、現在の値が min および max 属性による制限範囲外である <input> 要素を表します。

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

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

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

構文

:out-of-range

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">
      <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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:out-of-rangeChrome 完全対応 10Edge 完全対応 13Firefox 完全対応 29IE 未対応 なしOpera 完全対応 11Safari 完全対応 ありWebView Android 完全対応 2.3Chrome Android 完全対応 18Edge Mobile 完全対応 13Firefox Android 完全対応 16Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, dskmori, YuichiNukiyama
最終更新者: mdnwebdocs-bot,