Psevdoklass in-range

in-range psevdoklassi, qiymatlari ma'lum bir diapazonda belgilangan elementlar uchun uslubni belgilaydi. Qiymatlar diapazoni min va max atributlari bilan belgilanishi kerak.

Sintaksis

cssselector:in-range {

}

Misol

Keling, raqamlar kiritiladigan input uchun, 1 dan 5 gacha bo'lgan diapazonga kiradigan sonlar kiritilganda fon rangi ko'k rangda bo'lishini belgilaymiz. Shuningdek, kiritilgan qiymat tanlangan chegaraga tushmaganda pushti fon o'rnatamiz:

html<form>
  <p>1 dan 5 gacha raqam kiriting</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

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

Результат:

Shuningdek qarang