Az in-range pszeudoosztály

Az in-range pszeudoosztály stílust határoz meg azoknak az elemeknek, amelyek értékei egy meghatározott tartományban vannak. Az értéktartományt a min és max attribútumokkal kell megadni.

Szintaxis

cssszelektor:in-range {

}

Példa

Állítsunk be kék háttérszínt egy olyan input mező számára, amelybe az 1 és 5 közé eső számokat írhatjuk. Szintén állítsunk be rózsaszín háttért, amikor a bevitt érték nem esik a kiválasztott határok közé:

html<form>
  <p>Írj be egy 1 és 5 közötti számot</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

Lásd még