CSS3 :checked-klasiiri

Määrittely ja käyttö

CSS :checked Pseudoklasiitit käytetään vastaamaan mitä tahansa valittua <input> tai <option> elementteihin.

Tämä pätee <input type="radio">-, <input type="checkbox">- ja <select>-elementtien <option>-elementteihin.

Esimerkki

Esimerkki 1

Aseta kaikille valituille <input>-elementeille ohut punainen reunus:

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

Kokeile itse

Esimerkki 2

Aseta erilaisia tyylejä valittuna oleville valintapainikkeille, valintaruuduille ja valitsimille:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Kokeile itse

CSS-syntaksi

:checked {
  css-lauseet;
}

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee tätä pseudoklasieria.