CSS/Selektoren/out-of-range
Aus SELFHTML-Wiki
< CSS | Selektoren
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
|
---|---|
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
Liste der CSS-Selektoren
- Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente