:in-range

Springen zu:
  1. Syntax
  2. Beispiel
  3. Spezifikationen
  4. Browser compatibility
  5. See also

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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 JaFirefox 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 NeinOpera 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 Ja
Hinweise
Vollständige Unterstützung Ja
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 ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 16Opera Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
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 Ja
Hinweise
Vollständige Unterstützung Ja
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 ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: danieldeichfuss
Zuletzt aktualisiert von: danieldeichfuss,