Псевдокласс in-range

Псевдокласс in-range белгиланган диапозонда қийматлари бўлган элементларга стил белгилайди. Қийматлар диапозони min ва max атрибутлари орқали белгиланиши керак.

Синтаксис

селектор:in-range {

}

Мисол

Киргизиладиган соңлар 1 дан 5 гача бўлган диапозонга тўғри келадиган инпут учун кўк рангли фон белгилаймиз. Шунингдек, киритилган қиймат танланган чеккадан ташқарида бўлганда гули рангли фон ўрнатамиз:

<form>
	<p>1 дан 5 гача соң киритинг</p>
	<p>
		<input type="number" min="1" max="5" value="1">
	</p>
</form>

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

Шунингдек қаранг

псевдокласс :out-of-range,
у қийматлари диапозон чеккасидан ташқарида бўлган элементларга стил белгилайди
псевдокласс :valid,
у тўғри қиймат киритилган инпутга стил белгилайди
псевдокласс :invalid,
у нотўғри қиймат киритилган инпутга стил белгилайди