Az out-of-range pszeudoosztály

Az out-of-range pszeudoosztály stílust határoz meg azoknak az elemeknek, amelyek értéke kívül esik a megadott tartományon. Az értéktartományt a min és max attribútumokkal kell megadni.

Szintaxis

cssszelektor:out-of-range {
  
}

Példa

Állítsunk be kék háttérszínt azon input mezők számára, amelyekbe beírt számok az 1 és 5 közötti tartományba esnek. Emellett á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>Adj meg 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