CSS/Selektoren/out-of-range

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der :out-of-range-Selektor kennzeichnet Formularelemente danach, ob eine Eingabe inner- oder außerhalb der mit den Attributen min und max festgelegten Mindest- und Maximalwerten liegt. Diese Pseudoklasse gilt nur bei Elementen, bei denen eine Bereichsbegrenzung vorgenommen werden kann.

Syntax :out-of-range
Parameter {{{Parameter}}}}}
Browsersupport Details: caniuse.com
Beispiel
input:in-range {
    background-color: rgb(0 255 0 / 0.25);
}
input:out-of-range {
    background-color: rgb(255 0 0 / 0.25);
    border: medium solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.


Siehe auch

Weblinks