Bagaimanakah Saya Boleh Menggantikan Butang Radio dengan Imej Menggunakan HTML dan CSS?

Butang Radio dengan Pemegang Tempat Imej

Untuk menggantikan butang radio dengan imej, ikut langkah berikut:

1. Balut Butang Radio dan Imej dalam : Letakkan butang radio dan imej yang sepadan dalam elemen untuk mengaitkannya.
2. Sembunyikan Butang Radio: Untuk mengalih keluar kemunculan butang radio, tetapkan kedudukannya kepada mutlak, kelegapan kepada 0 dan lebar serta tinggi kepada 0.
3. Sasaran Imej dengan Pemilih Adik Beradik: Gunakan pemilih adik beradik bersebelahan ( ) untuk menyasarkan imej seterusnya pada butang radio tersembunyi.
4. Imej Disemak Gaya: Gunakan gaya pada imej bersebelahan dengan butang radio yang ditandai, seperti garis besar atau perubahan warna.
5. Sediakan Teks Alt: Pastikan imej mempunyai atribut alt untuk tujuan kebolehaksesan, kerana ia akan berfungsi sebagai butang radio label.

Berikut ialah contoh CSS dan kod HTML yang menunjukkan penyelesaian ini:

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggantikan Butang Radio dengan Imej Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!