Übersicht
Die :out-of-range
CSS Pseudoklasse passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.
Hinweis: Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.
Beispiel
HTML
<form action="" id="form1"> <ul>Werte zwischen 1 und 10 sind gültig. <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">Der Wert ist </label> </li> </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:' OK'; } input:out-of-range + label::after { content:'out of range!'; }
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
Selectors Level 4 Die Definition von ':in-range' in dieser Spezifikation. |
Arbeitsentwurf | Keine Änderung |
CSS Basic User Interface Module Level 3 Die Definition von ':in-range' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Spezifikation |
Browser Kompatibilität
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:out-of-range | Chrome Vollständige Unterstützung 10 | Edge Vollständige Unterstützung 13 | Firefox Vollständige Unterstützung 29 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 11 | Safari Vollständige Unterstützung 5.1 | WebView Android Vollständige Unterstützung 2.3 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 16 | Opera Android Vollständige Unterstützung 11 | Safari iOS Vollständige Unterstützung 5 | Samsung Internet Android Vollständige Unterstützung 1.0 |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
Siehe auch
- Link bezogene Pseudoklassen:
:link
,:visited
, and:hover
. - Datenformular Validierungsguide