DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der `:in-range`-Pseudo-Selektor in CSS wählt Eingabeelemente aus, wenn ihr Wert innerhalb des als akzeptabel definierten Bereichs liegt. Er ist Teil der CSS Selectors Level 4 Spezifikation, die sich derzeit im Editor's Draft befindet.
<input max="10" min="5" type="number">input:in-range {
border: 5px solid green;
}Ich glaube, er ist nur für `input[type=number]` relevant. Range-Eingaben erlauben keine Werte außerhalb ihres min/max und es ergibt bei anderen Eingabetypen wenig Sinn. Vielleicht bei textbasierten Eingaben mit einer maxlength, aber das Verhalten bei den meisten Browsern ist, die Eingabe über das Maximum hinaus zu verhindern.
Demo
Ähnlich wie im obigen Code hat diese Eingabe einen grünen Rand, wenn ihr Wert zwischen 5 und 10 liegt.
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 53 | 50 | Nein | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.3 |
Man kann immer manuell einen Wert eingeben, dann ist es nützlich :)
Sieht so aus, als würde es auch unter Android Firefox funktionieren!
Ich wusste nicht, dass so etwas existiert.
Ich bin dankbar, dass ich das gefunden habe. Sehr interessant.
Im Beispiel (mit Firefox)
10.0000000000000008881784197001252323389053344726…
ist immer noch in-range (grün)
aber nicht
10.00000000000000088817841970012523233890533447266…
Was genau ist also dieser "max value"?
Man kann immer (zu jeder Zahl) hinzufügen: 0.0000000000000008881784197001252323389053344726… um immer noch "in-range" zu sein.