CSS/Selektoren/out-of-range

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

• CSS/Tutorials/Selektoren/Pseudoklasse
• HTML/Tutorials/Formulare
  • JavaScript/Tutorials/Formulare/Eingaben mit JavaScript validieren

Weblinks

• W3C: The Range Pseudo-classes: :in-range and :out-of-range
• MDN: out-of-range