:out-of-range

von 1 Mitwirkenden:
 

Ü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.
Working Draft Keine Änderung
CSS Basic User Interface Module Level 3
Die Definition von ':in-range' in dieser Spezifikation.
Working Draft Ursprüngliche Spezifikation

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Unterstützung für <input> 10.0 28.0 (28.0) Nicht unterstützt 11.0 5.2
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Unterstützung für <input> 2.3 16.0 (16.0) Nicht unterstützt (Yes) (Yes)

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,