Az in-range pszeudoosztály

Az in-range pszeudoosztály stílust határoz meg azoknak az elemeknek, amelyek értékei egy meghatározott tartományban vannak. Az értéktartományt a min és max attribútumokkal kell megadni.

Szintaxis

szelektor:in-range {

}

Példa

Állítsunk be kék háttérszínt egy olyan input mező számára, amelybe az 1 és 5 közé eső számokat írhatjuk. Szintén állítsunk be rózsaszín háttért, amikor a bevitt érték nem esik a kiválasztott határok közé:

<form>
	<p>Írj be egy 1 és 5 közötti számot</p>
	<p>
		<input type="number" min="1" max="5" value="1">
	</p>
</form>

input:in-range {
	background: #C2DDFD;
}
input:out-of-range {
	background: #E37D76;
}

Lásd még

a :out-of-range pszeudoosztály,
amely stílust határoz meg azoknak az elemeknek, amelyek értékei a tartományon kívül esnek
a :valid pszeudoosztály,
amely stílust határoz meg a helyes értéket tartalmazó input mezőnek
a :invalid pszeudoosztály,
amely stílust határoz meg a helytelen értéket tartalmazó input mezőnek