DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der Pseudo-Selektor :out-of-range in CSS wählt Eingabeelemente aus, wenn ihr Wert außerhalb des als akzeptabel definierten Bereichs liegt.
<input max="10" min="5" type="number">input:out-of-range {
border: 5px solid red;
}Ich glaube, er ist nur relevant für input[type=number]. Range-Inputs lassen keine Werte außerhalb ihres Min/Max-Wertes zu und es macht bei keinem anderen Eingabetyp viel Sinn. Vielleicht bei textbasierten Eingaben mit einer max-Länge, aber die Handhabung dieser ist in den meisten Browsern ohnehin so, dass die Eingabe über das Maximum hinaus verhindert wird.
Der Selektor ist in der Selectors Level 4 Spezifikation definiert, zusammen mit seinem Gegenstück :in-range.
Demo
Genau wie der obige Code erhält dieses Eingabefeld einen grünen Rand, wenn sein Wert zwischen 5 und 10 liegt.
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, wo es mehr Details gibt. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version 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 |
FYI: Um dies (und das :in-range Beispiel) zu testen, müssen Sie einen Wert außerhalb des Bereichs per Tastatur oder durch Einfügen eingeben. Der Browser erzwingt den Bereich bei der Verwendung des Spinners.
Gut zu wissen, aber ich kann keinen Anwendungsfall dafür erkennen. Kann jemand?
Ich würde Benutzer lieber durch
min&maxAttribute einschränken oder einen Range-Slider verwenden.