Pseudo-sınıf in-range
Pseudo-sınıf in-range, değerleri
belirli bir aralıkta olan öğelere stil
belirler. Değer aralığı min
ve max nitelikleri ile
belirtilmelidir.
Sözdizimi
seçici:in-range {
}
Örnek
Girdiğimiz sayıların 1'den 5'e kadar olan aralığa düştüğü input için mavi arkaplan rengi belirleyelim. Ayrıca, girilen değer seçilen sınıra uymadığında pembe arkaplan ayarlayalım:
<form>
<p>1'den 5'e kadar bir sayı girin</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
Ayrıca Bakınız
-
pseudo-sınıf
:out-of-range,
değerleri aralık dışında kalan öğelere stil belirler -
pseudo-sınıf
:valid,
doğru değerin girildiği input'a stil belirler -
pseudo-sınıf
:invalid,
yanlış değerin girildiği input'a stil belirler