: diperiksa - Trik CSS

Anonim

Kelas :checkedpseudo dalam CSS memilih elemen ketika berada dalam keadaan yang dipilih. Ia hanya dikaitkan dengan input ( ) elemen radio jenis dan kotak pilihan. The :checkedpemilih pseudo-kelas perlawanan jenis input radio dan kotak semak apabila diperiksa atau ditoggel kepada kepada keadaan. Sekiranya mereka tidak dipilih atau diperiksa, tidak ada pertandingan.

Oleh itu, apabila kotak centang dicentang, dan anda menyasarkan label sebaik sahaja:

input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; ) 

Teks label akan bertukar dari huruf miring kelabu menjadi font normal merah.

 CSS is Awesome 

CSS Hebat

Di atas adalah contoh penggunaan kelas :checkedpseudo untuk menjadikan borang lebih mudah diakses. Kelas :checkedpseudo dapat digunakan dengan input tersembunyi dan label yang dapat dilihat untuk membina widget interaktif, seperti galeri gambar.

Lebih Banyak Sumber

  • Peretasan kotak pilihan
  • Dokumen MDN di: diperiksa
  • Spesifikasi W3C pada: diperiksa

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang 3.1+ Sebarang 9+ 9+ ada ada