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

Die :out-of-range CSS-Pseudoklasse repräsentiert ein <input>-Element, dessen aktueller Wert außerhalb der durch die min- und max-Attribute festgelegten Bereichsgrenzen liegt.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um dem Benutzer visuell anzuzeigen, dass der aktuelle Wert eines Feldes außerhalb der zulässigen Grenzen liegt.

Hinweis: Diese Pseudoklasse gilt nur für Elemente, die eine Bereichsbegrenzung haben (und diese übernehmen können). Ohne eine solche Begrenzung kann ein Element weder "in-range" noch "out-of-range" sein.

Syntax

css
:out-of-range {
  /* ... */
}

Beispiele

HTML

html
<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input
        id="value1"
        name="value1"
        type="number"
        placeholder="1 to 10"
        min="1"
        max="10"
        value="12" />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

CSS

css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}

Ergebnis

Spezifikationen

Specification
HTML
# selector-out-of-range
Selectors Level 4
# out-of-range-pseudo

Browser-Kompatibilität

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
:out-of-range

Legend

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

Full support
Full support

Siehe auch