Pseudoklasa CSS :out-of-range wybiera wszystkie elementy input
, które mogą mieć zakres dopuszczalnych wartości zdefiniowany przez atrybuty min
i max
oraz których obecna wartość nie mieści się w tym przedziale.
Odwrotnością pseudoklasy :out-of-range
jest pseudoklasa :in-range
.
Przykład użycia :in-range
W poniższym przykładzie element input
typu number
ma dopuszczalny przedział wartości od 10
do 20
. Jeśli użytkownik wpisze liczbę mniejszą od 10
lub większą od 20
, tło tego elementu zmieni kolor na czerwony.
<style>
:out-of-range {
background-color: red;
}
</style>
...
<input type="number" name="liczba" min="10" max="20">
Efekt zastosowania tego kodu w oknie przeglądarki:

Składnia :out-of-range
Składnia pseudoklasy :out-of-range
:
:out-of-range {...}