Pseudoklasse in-range

Die Pseudoklasse in-range legt den Stil für Elemente fest, deren Werte innerhalb eines bestimmten Bereichs liegen. Der Wertebereich muss durch die Attribute min und max festgelegt sein.

Syntax

cssselektor:in-range {

}

Beispiel

Lassen Sie uns eine hellblaue Hintergrundfarbe für ein Eingabefeld festlegen, in das Zahlen eingegeben werden, die in den Bereich von 1 bis 5 fallen. Wir setzen auch einen rosa Hintergrund, wenn der eingegebene Wert nicht in die gewählten Grenzen fällt:

html<form>
  <p>Geben Sie eine Zahl von 1 bis 5 ein</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

Siehe auch