Pseudoclasa in-range

Pseudoclasa in-range definește stilul pentru elementele ale căror valori sunt setate într-un anumit interval. Intervalul de valori trebuie să fie specificat prin atributele min și max.

Sintaxă

cssselector:in-range {

}

Exemplu

Să setăm o culoare albastră pentru fundalul unui input în care sunt introduse numere care se încadrează în intervalul de la 1 la 5. De asemenea, vom seta un fundal roz, atunci când valoarea introdusă nu se încadrează în limitele alese:

html<form>
  <p>Introduceți un număr de la 1 la 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;
}

Результат:

Vedeți și