:in-range

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, 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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:in-rangeChrome 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 13Firefox 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 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 16Opera 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.

See also

Verwandte Themen
  1. CSS
  2. CSS Referenz
  3. CSS Selectors
  4. Handbuch
    1. Using the :target pseudo-class in selectors [Übersetzen]
  5. Eigenschaften
    1. Selector list [Übersetzen]
  6. Basic Selectors
    1. Typselektoren
    2. Klassenselektoren
    3. ID-Selektoren
    4. Universalselektoren
    5. Attributselektoren
  7. Combinators
    1. Angrenzende Geschwisterselektoren
    2. Allgemeine Geschwisterselektoren
    3. Kindselektoren
    4. Descendant combinator [Übersetzen]
    5. Column combinator [Übersetzen]
  8. Pseudo-classes
    1. :active
    2. :any-link [Übersetzen]
    3. :checked [Übersetzen]
    4. :blank [Übersetzen]
    5. :default
    6. :defined [Übersetzen]
    7. :dir()
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible [Übersetzen]
    17. :focus-within [Übersetzen]
    18. :has() [Übersetzen]
    19. :host() [Übersetzen]
    20. :host-context() [Übersetzen]
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any()) [Übersetzen]
    26. :lang
    27. :last-child
    28. :last-of-type
    29. :left [Übersetzen]
    30. :link
    31. :not()
    32. :nth-child
    33. :nth-last-child() [Übersetzen]
    34. :nth-last-of-type() [Übersetzen]
    35. :nth-of-type() [Übersetzen]
    36. :only-child
    37. :only-of-type [Übersetzen]
    38. :optional
    39. :out-of-range
    40. :placeholder-shown [Übersetzen]
    41. :read-only [Übersetzen]
    42. :read-write [Übersetzen]
    43. :required
    44. :right [Übersetzen]
    45. :root
    46. :scope [Übersetzen]
    47. :target [Übersetzen]
    48. :valid [Übersetzen]
    49. :visited
    50. :where() [Übersetzen]
  9. Pseudo-elements
    1. ::-moz-progress-bar
    2. ::-moz-range-progress [Übersetzen]
    3. ::-moz-range-thumb [Übersetzen]
    4. ::-moz-range-track [Übersetzen]
    5. ::-ms-browse
    6. ::-ms-check
    7. ::-ms-clear [Übersetzen]
    8. ::-ms-expand [Übersetzen]
    9. ::-ms-fill
    10. ::-ms-fill-lower
    11. ::-ms-fill-upper
    12. ::-ms-reveal
    13. ::-ms-thumb
    14. ::-ms-ticks-after [Übersetzen]
    15. ::-ms-ticks-before [Übersetzen]
    16. ::-ms-tooltip [Übersetzen]
    17. ::-ms-track [Übersetzen]
    18. ::-ms-value [Übersetzen]
    19. ::-webkit-progress-bar [Übersetzen]
    20. ::-webkit-progress-value [Übersetzen]
    21. ::-webkit-slider-runnable-track [Übersetzen]
    22. ::-webkit-slider-thumb [Übersetzen]
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue [Übersetzen]
    27. ::first-letter (:first-letter) [Übersetzen]
    28. ::first-line (:first-line) [Übersetzen]
    29. ::grammar-error [Übersetzen]
    30. ::marker [Übersetzen]
    31. ::part() [Übersetzen]
    32. ::placeholder
    33. ::selection
    34. ::slotted() [Übersetzen]
    35. ::spelling-error [Übersetzen]