27. :in-range -CSS3

Przeznaczenie selektora `:in-range`

:in-range { ... }

Selektor :in-range odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :in-range.

Cechy elementu HTML spełniają zasadę pseudoklasy :in-range, gdy w danym momencie dany element HTML reprezentuje daną, która posiada wartość, która to wartość mieści się w przedziale wartości, jaki został określony dla wspomnianego elementu HTML.

Informacje techniczne o selektorze `:in-range`

ograniczenie - elementy HTML

element input typu date posiadający w danym momencie atrybut min oraz atrybut max
element input typu time posiadający w danym momencie atrybut min oraz atrybut max
element input typu number posiadający w danym momencie atrybut min oraz atrybut max
element input typu range posiadający w danym momencie atrybut min oraz atrybut max

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:in-range`

input:in-range {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

input:in-range { background-color:red; }

input:in-range

do każdego elementu input, który reprezentuje daną, która posiada wartość mieszczącą się w określonym dla danego elementu input przedziale wartości

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      input:in-range {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Wybierz wartość z przedziału wartości:
      <input type="number" min="0" max="100" value="60">
    </label>

    <hr>

    <label>
      Wybierz wartość z przedziału wartości:
      <input type="number" min="5" max="10" value="2">
    </label>

  </body>
</html>