Selektory#
Pseudokalsa zachowania zakresu#
:in-range { /* deklaracje */ }Pseudoklasa :in-range reprezentuje elementy interfejsu użytkownika (wejścia), których wartość zawiera się w zakresie, w odniesieniu do ograniczeń zakresu, jak określono w języku dokumentu. W sytuacji kiedy ograniczenia zakresu w ogóle nie mają zastosowania do elementu, to nie należy on ani do :in-range ani do :out-of-range.
Najnowszy HTML5 podaje listę elementów z zachowanym zakresem, które będą pasowały do pseudoklasy :in-range. Ogólnie rzecz biorąc dotyczy to elementów, które są kandydatami dla ograniczającej walidacji, mają ograniczenia zakresu i aktualna wartość elementu nie jest ani poniżej ani powyżej tych ograniczeń, czyli znajduje się w zakresie.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:in-range {outline: 5px solid green; border: 5px solid green;}
:out-of-range {outline: 5px solid red; border: 5px solid red;}
</style>
</head>
<body>
<p><label>Cyfry (dowolne): <input type="number"></label></p>
<p><label>Cyfry (min=5): <input type="number" min="5" value="5"></label></p>
<p><label>Cyfry (max=10): <input type="number" max="10" value="5"></label></p>
<p><label>Cyfry (min=5 max=10): <input type="number" min="5" max="10" value="5"></label></p>
<p><label>Czas (min=21:00)<input type="time" min="21:00" step="60" value="21:00">
<p><label>Czas (max=06:00)<input type="time" max="06:00" step="60" value="06:00">
<p><label>Czas (min=21:00 max=06:00)<input type="time" min="21:00" max="06:00" step="60" value="21:00"></label></p>
</body>
</html>Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :in-range prawidłowo (IE w ogóle). Nie wszystkie typy kontrolek i nie wszystkie przypadki są interpretowane zgodnie z najnowszymi wymaganiami.