In-range-pseudoluokka
Pseudoluokka in-range asettaa tyylin
elementeille, joiden arvot on määritetty
tietyn alueen sisällä. Arvoalue
on määritettävä attribuuteilla min
ja max.
Syntaksi
valitsija:in-range {
}
Esimerkki
Asetetaan vaaleansininen tausta syöttökentälle, johon
syötetään numerot, jotka ovat alueella
välillä 1 - 5. Asetetaan myös vaaleanpunainen tausta, kun
syötetty arvo ei ole valitulla
alueella:
<form>
<p>Syötä numero väliltä 1-5</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
Katso myös
-
pseudoluokka
:out-of-range,
joka asettaa tyylin elementeille, joiden arvot eivät ole alueella -
pseudoluokka
:valid,
joka asettaa tyylin syöttökentälle, johon on syötetty kelvollinen arvo -
pseudoluokka
:invalid,
joka asettaa tyylin syöttökentälle, johon on syötetty virheellinen arvo
