Out-of-range psevdoklassi

out-of-range psevdoklassi o'zining qiymati ko'rsatilgan diapazondan tashqarida bo'lgan elementlar uchun uslubni belgilaydi. Qiymatlar diapazoni min va max atributlari orqali belgilanishi kerak.

Sintaksis

cssselector:out-of-range {
  
}

Misol

Keling, 1 dan 5 gacha bo'lgan diapazonga kiradigan sonlar kiritiladigan input uchun fon rangi ko'k rangda belgilaymiz. Shuningdek, kiritilgan qiymat tanlangan chegaraga to'g'ri kelmaganida pushti rang fonni o'rnatamiz:

html<form>
  <p>1 dan 5 gacha son 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

  • :in-range psevdoklassi,
    belgilangan qiymatlar diapazoniga ega elementlar uchun uslubni belgilaydi
  • :invalid psevdoklassi,
    unga noto'g'ri qiymat kiritilgan input uchun uslubni belgilaydi
  • :valid psevdoklassi,
    unga to'g'ri qiymat kiritilgan input uchun uslubni belgilaydi