Ο ψευδο-κλάσος 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,
που ορίζει στυλ για την εισαγωγή, στην οποία εισήχθη λανθασμένη τιμή