:in-range

Die :in-range CSS Pseudoklasse entspricht einem <input> Element, dessen aktueller Wert innerhalb eines bestimmten Bereichs liegt. Dieser Bereich wird durch die min und max Attribute festgelegt.

/* Wählt jedes <input> Element aus, aber nur wenn es eine 
   Begrenzung festlegt, und sein Wert innerhalb dieser 
   Begrenzung liegt */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

Diese Pseudoklasse ist nützlich um den Nutzer visuell darauf hinzuweisen, dass der aktuelle Wert des Feldes innerhalb der erlaubten Begrenzungen liegt.

Note: Diese Pseudoklasse gilt nur für Elemente, die eine Begrenzung haben. Wenn es eine solche Begrenzung nicht gibt, kann der Wert des Elements weder "in-range" (innerhalb der Begrenzung) noch "out-of-range" (außerhalb der Begrenzung) sein.

Syntax

:in-range

Beispiel

HTML

<form action="" id="form1">
  <ul>Werte zwischen 1 und 10 sind gültig.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Der Wert ist </label>
    </li>
  </ul>
</form>

CSS

li {
  list-style: none;
  margin-bottom: 1em;
}

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 + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'außerhalb der Begrenzung!';
}

Result

Spezifikationen

Specification	Status	Comment
HTML Living Standard Die Definition von ':in-range' in dieser Spezifikation.	Lebender Standard	Definiert wann `:in-range` HTML-Elementen entspricht.
Selectors Level 4 Die Definition von ':in-range' in dieser Spezifikation.	Arbeitsentwurf	Standard Wert definiert.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`:in-range`	Chrome Vollständige Unterstützung 10 Hinweise Vollständige Unterstützung 10 Hinweise Hinweise Before Chrome 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.	Edge Vollständige Unterstützung 13	Firefox Vollständige Unterstützung 29 Hinweise Vollständige Unterstützung 29 Hinweise Hinweise Before Firefox 50, `:in-range` matched disabled and read-only inputs (see bug 1264157). In Firefox 50, it was changed to only match enabled read-write inputs.	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 11 Hinweise Vollständige Unterstützung 11 Hinweise Hinweise Before Opera 39, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.	Safari Vollständige Unterstützung 5.1 Hinweise Vollständige Unterstützung 5.1 Hinweise Hinweise In Safari, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.	WebView Android Vollständige Unterstützung 2.3 Hinweise Vollständige Unterstützung 2.3 Hinweise Hinweise Before version 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In version 52, it was changed to only match enabled read-write inputs.	Chrome Android Vollständige Unterstützung 18 Hinweise Vollständige Unterstützung 18 Hinweise Hinweise Before Chrome 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.	Firefox Android Vollständige Unterstützung 16	Opera Android Vollständige Unterstützung 11 Hinweise Vollständige Unterstützung 11 Hinweise Hinweise Before Opera 39, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.	Safari iOS Vollständige Unterstützung 5 Hinweise Vollständige Unterstützung 5 Hinweise Hinweise In Safari, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.	Samsung Internet Android Vollständige Unterstützung 1.0 Hinweise Vollständige Unterstützung 1.0 Hinweise Hinweise Before version 6.0, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In version 6.0, it was changed to only match enabled read-write inputs.

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.