Out-of-range-pseudoluokka

out-of-range-pseudoluokka asettaa tyylin elementeille, joiden arvot ovat määritetyn alueen ulkopuolella. Arvoalue on määritettävä min- ja max-atribuuteilla.

Syntaksi

cssvalitsija:out-of-range {
  
}

Esimerkki

Asetetaan vaaleansininen tausta syöttökentälle, johon syötetään numerot, jotka ovat alueella 1 - 5. Asetetaan myös vaaleanpunainen tausta, kun syötetty arvo ei ole valitulla alueella:

html<form>
  <p>Syötä numero 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;
}

Результат:

Katso myös