Bagaimanakah Saya Boleh Menggayakan Label Butang Radio Terpilih dalam CSS?

Menggayakan Label Butang Radio Terpilih

Dalam CSS, apabila menggayakan label butang radio yang dipilih, adalah penting untuk memastikan penyasaran dan kekhususan yang betul. Untuk mencapai matlamat ini, ikuti langkah berikut:

1. Sembunyikan Elemen Input:
Gunakan paparan: tiada; untuk menyembunyikan elemen radio input. Ini membantu memfokuskan pada label yang berkaitan.

2. Label Gaya:
Tentukan penggayaan untuk label, termasuk warna latar belakang, jidar dan pelapik. Gunakan blok sebaris untuk membenarkan label terletak bersebelahan.

3. Butang Radio Disemak Sasaran:
Untuk menggayakan label butang radio yang dipilih, gunakan kelas pseudo :checked untuk menyasarkan label bersebelahan:

.radio-toolbar input[type="radio"]:checked + label {
  /* Styling for selected labels */
}

Contoh:

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
  background-color: #bbb;
}

Dengan mengikut langkah ini, anda boleh menggayakan label radio terpilih dengan berkesan butang, memastikan ia menonjol dan meningkatkan pengalaman pengguna.