Ostatnio edytowany:

:in-range

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje 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="range" 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>

Rezultat


Czerwony kolor tła ma tylko ten element "input", który reprezentuje daną, która posiada wartość mieszczącą się w określonym dla danego elementu "input" przedziale wartości.

Interpretacja selektora :in-range

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji selektora .