Bagaimanakah Saya Boleh Menggayakan Butang Radio untuk Kelihatan Seperti Butang Hanya Menggunakan CSS dan Mengekalkan Keserasian IE8?

Menyesuaikan Penampilan Butang Radio: Menjadikannya Kelihatan Seperti Butang

Isu:

Anda bertujuan untuk membuat butang radio pada borang derma yang menyerupai butang dan bukannya dail bulatan biasa. Selain itu, ciri ini perlu berfungsi dengan lancar dalam IE8.

Penyelesaian:

Menggunakan CSS, adalah mungkin untuk mencapai hasil yang diingini tanpa bergantung pada rangka kerja luaran atau pengubahsuaian HTML yang ketara .

HTML Struktur:

Struktur HTML sebahagian besarnya kekal tidak berubah, menggunakan senarai (ul) untuk butang radio.

Penggayaan CSS:

• Sembunyikan butang radio lalai menggunakan kelegapan: 0.01.
• Kedudukan elemen input secara mutlak, menjajarkannya dengan label di atasnya.
• Tetapkan label sebagai elemen blok dan letakkannya secara mutlak untuk menutup keseluruhan kawasan butang. Gunakan kursor: penunjuk untuk interaktiviti.
• Apabila butang radio ditanda, gunakan CSS untuk menggunakan warna latar belakang pada label yang sepadan, meniru kesan klik butang.

Kod Contoh:

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

Contoh Gunakan:

<ul class="donate-now">
  <li>
    <input type="radio">

Pendekatan ini membolehkan anda menyesuaikan penampilan butang radio dengan berkesan, menjadikannya menyerupai butang tanpa menjejaskan fungsi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Butang Radio untuk Kelihatan Seperti Butang Hanya Menggunakan CSS dan Mengekalkan Keserasian IE8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!