Ostatnio edytowany:

:checked

Autor: Virtual Patriot

Przeznaczenie selektora :checked

      :checked { ... }
    

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

Cechy elementu HTML spełniają zasadę pseudoklasy :checked, gdy w danym momencie dany element HTML posiada atrybut checked lub gdy w danym momencie dany element HTML został wybrany przez użytkownika.

Dodatkowe techniczne informacje o selektorze :checked

ograniczenie - elementy HTML
ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :checked

input:checked {
  outline:3px solid red;
}

Wyjaśnienie przykładowej reguły CSS

      input:checked { outline:3px solid red; }
    
input:checked

Do każdego elementu input, którego cechy w danym momencie spełniają zasadę pseudoklasy :checked

outline

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

3px solid red

na obrys o szerokości trzech pikseli, stylu solid oraz kolorze czerwonym

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

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

    <style>
      input:checked {
        outline:3px solid red;
      }
    </style>
  </head>

  <body>

    <p>
      <label>
        <input type="radio" name="kolor"> czerwony
      </label>
    </p>

    <p>
      <label>
        <input type="radio" name="kolor" checked> zielony
      </label>
    </p>

    <p>
      <label>
        <input type="radio" name="kolor"> niebieski
      </label>
    </p>

  </body>
</html>

Rezultat

Tylko element "input", który posiada atrybut "checked" lub który zostanie wybrany przez nas, będzie miał zmieniony styl wyglądu swojego obrysu.

Interpretacja selektora :checked

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .