Pseudotrieda in-range

Pseudotrieda in-range nastavuje štýl prvkom, ktorých hodnoty sú zadané v určitom rozsahu. Rozsah hodnôt musí byť zadaný atribútmi min a max.

Syntax

cssselektor:in-range {

}

Príklad

Nastavme modrú farbu pozadia pre vstup, do ktorého sa zadávajú čísla spadajúce do rozsahu od 1 do 5. Tiež nastavme ružové pozadie, keď zadaná hodnota nespadá do zvoleného rozsahu:

html<form>
  <p>Zadajte číslo od 1 do 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;
}

Результат:

Pozrite tiež