Bagaimana untuk Menggayakan Label Butang Radio Terpilih dengan Betul dalam CSS?

Menggayakan Label Butang Radio Terpilih dalam CSS

Dalam contoh ini, kami bertujuan untuk menggayakan label butang radio yang dipilih. Walau bagaimanapun, CSS yang disediakan nampaknya tidak berfungsi seperti yang dimaksudkan. Mari kita analisa kod HTML dan CSS untuk mengenal pasti isu tersebut.

Kod HTML mengandungi div dengan kelas "bar alat radio" yang memegang butang radio dan labelnya. Setiap butang radio disembunyikan menggunakan paparan: tiada;. Label mempunyai gaya yang digunakan padanya, termasuk warna latar belakang, jidar dan pelapik.

Bergerak ke CSS, peraturan pertama menyembunyikan input butang radio, yang betul. Peraturan kedua menggayakan label itu sendiri. Isunya terletak pada peraturan ketiga, yang bertujuan untuk menggayakan label butang radio yang dipilih.

Dalam peraturan ketiga, kami cuba memilih elemen label bersebelahan dengan butang radio yang diperiksa menggunakan perkara berikut. pemilih: input label .radio-toolbar[type="radio"]:ditanda. Walau bagaimanapun, pemilih hanya sepadan dengan elemen yang terdahulu. Dalam kes ini, ia menjangkakan input butang radio akan datang sebelum label, tetapi dalam kod HTML, label didahulukan sebelum input.

CSS Dibetulkan

Untuk membetulkan isu ini, kita boleh gunakan CSS berikut sebaliknya:

.radio-toolbar input[type="radio"]:checked + label { /* New selector */
    background-color: pink !important;
}

Dengan menukar pemilih kepada input .radio-toolbar[type="radio"]:label yang diperiksa, kami memastikan latar belakang warna digunakan pada label yang mengikuti input butang radio yang diperiksa.

Perubahan Tambahan untuk Kefungsian

Selain daripada isu pemilih, terdapat beberapa perubahan lain yang boleh kami lakukan untuk kefungsian yang lebih baik:

1. Adalah disyorkan untuk menggunakan sekatan sebaris untuk label menjajarkannya dengan betul.
2. Menetapkan atribut untuk pada label dan atribut id yang sepadan pada butang radio akan mengaitkannya dengan betul.

Berikut ialah HTML dan CSS:

HTML:

<div class="radio-toolbar">
  <input type="radio">

CSS:

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: 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 perubahan ini, butang radio melabel kini akan digayakan dan berfungsi dengan betul, menunjukkan pilihan yang dipilih dengan warna latar belakang merah jambu.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Label Butang Radio Terpilih dengan Betul dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!