CSS/Selektoren/Pseudoklasse/in-range, out-of-range

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Pseudoklassen :in-range und :out-of-range selektieren 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.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
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 + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
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[Bearbeiten]

Weblinks[Bearbeiten]