Bagaimanakah Saya Boleh Menjadikan Butang Radio Kelihatan Seperti Butang Hanya Menggunakan CSS?

Menjadikan Butang Radio Kelihatan Seperti Butang

Memasukkan butang radio ke dalam borang derma adalah perkara biasa, tetapi ramai yang lebih suka penampilan seperti butang berbanding dail bulatan tradisional. Untuk mencapai matlamat ini, CSS boleh digunakan dengan berkesan, tanpa memerlukan perpustakaan HTML atau JavaScript tambahan.

Langkah 1: Struktur HTML

Kekalkan struktur HTML asal bagi butang radio. Contohnya:

Langkah 2: Penggayaan CSS

Menggunakan CSS, sesuaikan penampilan:

/* Reset styles */
.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 label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

Penjelasan:

• Menetapkan semula styles mengalih keluar penggayaan penyemak imbas lalai.
• Mengubah kedudukan elemen menggunakan kedudukan mutlak membolehkan butang radio bertindih dengan label.
• Menyembunyikan butang radio menjadikannya tidak kelihatan secara visual.
• Mengesan sesuatu yang ditandakan keadaan menukar warna latar belakang label yang berkaitan.
• Peningkatan visual memberikan penampilan butang, termasuk kesan pelapik, jidar dan tuding.

Dengan tweak CSS ini, butang radio anda akan kelihatan seperti butang sambil mengekalkan fungsi dan keserasiannya dengan pelayar lama seperti IE8.

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