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 жасалма класстары,
туура эмес маани киргизилген инпутка стил берет