:in-range
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die :in-range
CSS Pseudoklasse repräsentiert ein <input>
-Element, dessen aktueller Wert innerhalb der durch die Attribute min
und max
festgelegten Bereichsgrenzen liegt.
Probieren Sie es aus
Diese Pseudoklasse ist nützlich, um dem Benutzer visuell anzuzeigen, dass der aktuelle Wert eines Feldes innerhalb der zulässigen Grenzen liegt.
Hinweis: Diese Pseudoklasse gilt nur für Elemente, die eine Bereichseinschränkung aufweisen (und diese annehmen können). Ohne eine solche Einschränkung kann das Element weder "in-range" noch "out-of-range" sein.
Syntax
:in-range {
/* ... */
}
Beispiele
HTML
<form action="" id="form1">
<ul>
Values between 1 and 10 are valid.
<li>
<input
id="value1"
name="value1"
type="number"
placeholder="1 to 10"
min="1"
max="10"
value="12"
required />
<label for="value1">Your value is </label>
</li>
</ul>
</form>
CSS
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgb(0 255 0 / 25%);
}
input:out-of-range {
background-color: rgb(255 0 0 / 25%);
border: 2px solid red;
}
input:in-range + label::after {
content: "okay.";
}
input:out-of-range + label::after {
content: "out of range!";
}
Ergebnis
Hinweis:
Ein leeres <input>
wird nicht als außerhalb des Bereichs betrachtet und kann nicht mit dem :out-of-range
-Pseudoklassen-Selektor ausgewählt werden. Die :blank
-Pseudoklasse existiert, um leere Eingaben auszuwählen. Zum Zeitpunkt der Erstellung dieses Dokuments ist diese jedoch experimentell und nicht gut unterstützt. Sie könnten auch das required
-Attribut und die :invalid
-Pseudoklasse verwenden, um allgemeinere Logik und Stilvorgaben für Pflichtfelder anzuwenden (:invalid
wird sowohl leere als auch außerhalb des Bereichs liegende Eingaben stylen).
Spezifikationen
Specification |
---|
HTML # selector-in-range |
Selectors Level 4 # in-range-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:in-range |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.