Псевдокласс out-of-range

Псевдокласс out-of-range өзүнө белгиленген диапазондон тышкаркы мааниге ээ элементтерге стил берилет. Маанинин диапазону min жана max атрибуттары аркылуу берилиши керек.

Синтаксис

cssтандоочу:out-of-range {
  
}

Мисал

Келгиле, 1дөн 5ко чейинки диапазонго кирген сандарды киргизген инпутка көк фон түсүн берели. Ошондой эле, киргизилген маани тандалган чектен тышкары болгондо, кызыл фонду коёлу:

html<form>
  <p>1ден 5ке чейинки санды киргизиңиз</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>
cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

Ошондой эле караңыз

  • псевдокласс :in-range,
    берген диапазондогу мааниге ээ элементтерге стил берет
  • псевдокласс :invalid,
    туура эмес маани киргизилген инпутка стил берет
  • псевдокласс :valid,
    туура маани киргизилген инпутка стил берет