:in-range

label {
 display: block;
 margin-top: 1em;
}
input:in-range {
 background-color: palegreen;
}

<form>
 <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
 <input id="amount" name="amount" type="number" min="2" max="6" value="4" />
 <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
 <input
 id="dep"
 name="dep"
 type="date"
 min="2022-01-01"
 max="2022-12-31"
 value="2025-05-05" />
 <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
 <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>

Hinweis: Diese Pseudoklasse gilt nur für Elemente, die (und die einen) Bereichsbeschränkung haben können. In Abwesenheit einer solchen Beschränkung kann das Element weder "in-range" noch "out-of-range" sein.

:in-range {
 /* ... */
}

<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>

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!";
}

Hinweis: Ein leeres <input> gilt nicht als außerhalb des Bereichs und wird nicht mit dem :out-of-range Pseudoklasse-Selektor ausgewählt. Die :blank Pseudoklasse existiert, um leere Eingabefelder auszuwählen, obwohl sie zum Zeitpunkt der Erstellung dieses Textes experimentell und nicht gut unterstützt ist. Sie könnten auch das required Attribut und die :invalid Pseudoklasse verwenden, um allgemeinere Logik und Styling bereitzustellen, um Eingaben verpflichtend zu machen (:invalid wird leere und außerhalb des Bereichs liegende Eingaben stylen).

Help improve MDN