: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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:out-of-rangeChrome Vollständige Unterstützung 10Edge Vollständige Unterstützung 13Firefox Vollständige Unterstützung 29IE Keine Unterstützung NeinOpera Vollständige Unterstützung 11Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 2.3Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 16Opera Android Vollständige Unterstützung 11Safari iOS Vollständige Unterstützung 5Samsung 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