Bagaimana untuk Menggantikan Imej Kotak Semak Lalai dengan Imej Hidup/Mati Tersuai Menggunakan CSS Tulen?

Penggantian Imej Kotak Semak CSS Tulen

Untuk senarai kotak pilihan anda, anda bertujuan untuk menggantikan imej kotak pilihan lalai dengan imej hidup/mati tersuai menggunakan CSS .

Untuk mencapai ini, ikuti ini langkah:

1. Sembunyikan Kotak Semak Asal:

   • Gunakan paparan CSS: tiada; harta untuk menyembunyikan kotak pilihan asli.

2. Buat Label Tersuai:

   • Letakkan label bersebelahan dengan kotak pilihan tersembunyi menggunakan input label.
   • Label ini akan bertanggungjawab untuk memaparkan tersuai anda imej.

3. Gayakan Label dengan Imej Latar Belakang:

   • Gunakan imej latar belakang dan input[type=checkbox ]: menandakan kelas pseudo untuk menogol antara hidup dan mati imej.

4. Letakkan Imej Dengan Betul:

   • Laraskan sifat kedudukan latar belakang untuk menjajarkan imej dengan betul dalam label.

Lengkapkan Kod CSS Contoh:

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

Nota: Pastikan laluan ke imej tersuai anda adalah betul. Rujuk JavaScript Fiddle dan Gist yang disediakan untuk contoh lengkap berfungsi.

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan Imej Kotak Semak Lalai dengan Imej Hidup/Mati Tersuai Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!