Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 10Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 29IE Keine Unterstützung NeinOpera Vollständige Unterstützung 11Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung 2.3Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 16Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,