:out-of-range
Ü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
BCD tables only load in the browser
Siehe auch
- Link bezogene Pseudoklassen:
:link
,:visited
, and:hover
. - Datenformular Validierungsguide