Pseudoklasse in-range

Pseudoklassen in-range anvender en stil til elementer, hvis værdier er inden for et bestemt område. Værdiområdet skal angives med attributterne min og max.

Syntaks

cssselektor:in-range {

}

Eksempel

Lad os angive en lyseblå baggrundsfarve for et inputfelt, hvor der indtastes tal, der falder inden for området fra 1 til 5. Vi indstiller også en lyserød baggrund, når den indtastede værdi ikke er inden for det valgte interval:

html<form>
  <p>Indtast et tal fra 1 til 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;
}

Результат:

Se også