Bagaimanakah Saya Boleh Memaparkan Imej Daripada Teks dalam Pilihan Butang Radio?

Memaparkan Imej dalam Pilihan Butang Radio

Butang radio menyediakan cara untuk memilih satu pilihan daripada kumpulan. Walau bagaimanapun, terdapat keadaan di mana anda mungkin ingin meningkatkan pengalaman pengguna dengan memaparkan imej dan bukannya label butang standard.

Untuk mencapai ini, anda boleh membungkus butang radio dan imej di dalam elemen label. Ini akan membolehkan anda menyesuaikan penampilan pilihan menggunakan CSS.

Menyembunyikan Butang Radio

Untuk menyembunyikan butang radio sebenar, gunakan peraturan CSS berikut:

[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

Ini menjadikan butang radio tidak kelihatan sementara masih mengekalkannya kefungsian.

Menggayakan Imej

Anda boleh menggayakan imej menggunakan pemilih adik beradik bersebelahan ( ):

[type=radio] + img {
  cursor: pointer;
}

Ini menggayakan imej bersebelahan ke butang radio tersembunyi.

Penyertaan Dipilih Pilihan

Untuk menyerlahkan pilihan yang dipilih, tambahkan keadaan bertanda pada butang radio:

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

Pertimbangan Kebolehcapaian

Jangan lupa untuk menyediakan teks alternatif dalam atribut alt imej. Ini memastikan kebolehaksesan untuk pengguna yang bergantung pada pembaca skrin.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Imej Daripada Teks dalam Pilihan Butang Radio?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!