Der :in-rangePseudo-Selektor in CSS stimmt mit Eingabeelementen überein, wenn ihr Wert innerhalb des als akzeptabel angegebenen Bereichs liegt. Es ist Teil der CSS Selectors Level 4-Spezifikation, die derzeit im Editor's Draft enthalten ist.
input:in-range ( border: 5px solid green; )Ich glaube es ist nur relevant auf input(type=number). Bereichseingaben erlauben keine Werte außerhalb von min / max und es macht bei keiner anderen Art von Eingabe viel Sinn. Vielleicht Texteingaben mit einer maximalen Länge, aber das Verhalten in den meisten Browsern besteht darin, die Eingabe über das Maximum hinaus zu verhindern.
Demo
Genau wie der obige Code hat diese Eingabe einen grünen Rand, wenn ihr Wert zwischen 5 und 10 liegt.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 53 | 50 | Nein | 79 | 10.1 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Verwandte Eigenschaften
Almanach am 1. Juli 2020:außer Reichweite
input:out-of-range ( border: 5px solid red; ) 
Geoff Graham