Pseudoklasas in-range

Pseudoklasas in-range nurodo stilių elementams, kurių reikšmės yra tam tikrame diapazone. Reikšmių diapazonas turi būti nurodytas atributais min ir max.

Sintaksė

selektorius:in-range {

}

Pavyzdys

Nustatykime šviesiai mėlyną įvesties lauko fono spalvą, į kurį įvedami skaičiai, patenkantys į diapazoną nuo 1 iki 5. Taip pat nustatykime rožinį foną, kai įvesta reikšmė nepatenka į pasirinktą ribą:

<form>
	<p>Įveskite skaičių nuo 1 iki 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;
}

Taip pat žiūrėkite

pseudoklasas :out-of-range,
kuris nurodo stilių elementams, kurių reikšmės išeina už diapazono ribų
pseudoklasas :valid,
kuris nurodo stilių įvesties laukui, į kurį buvo įvesta teisinga reikšmė
pseudoklasas :invalid,
kuris nurodo stilių įvesties laukui, į kurį buvo įvesta neteisinga reikšmė