Pseudo-kelas :checked CSS3

Definisi dan penggunaan

CSS :checked Pseudo-kelas digunakan untuk cocokkan setiap yang dipilih <input> atau <option> Elemen.

Ini berlaku untuk <input type="radio">, <input type="checkbox"> serta <select> elemen <option>.

Contoh

Contoh 1

Atur garis luar merah tipis untuk semua elemen <input> yang dipilih:

input:checked {
  garis luar: 1px tegak lurus merah;
}

Coba sendiri

Contoh 2

Atur gaya yang berbeda untuk tombol pilihan, kotak centang dan opsi saat mereka dipilih:

input[type="radio"]:checked {
  bayangan: 0 0 5px 3px biru;
}
input[type="checkbox"]:checked {
  bayangan: 0 0 5px 3px maroon;
}
option:checked {
  warna: biru;
  background-color: merah jambu;
}

Coba sendiri

Grammar CSS

:checked {
  deklarasi css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung pseudo-kelas ini penuh.