in-range жасалма классы

in-range жасалма класстары, мааниси белгилүү бир диапазондо берилген элементтерге стил берет. Маанилер диапазону min жана max атрибуттары менен белгиленүүсү керек.

Синтаксис

cssтандоочу:in-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;
}

Результат:

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