Bagaimana untuk Menggayakan Label Butang Radio Terpilih dalam CSS?

Cara Menggayakan Label Butang Radio Terpilih dalam CSS

Butang radio menyediakan elemen interaksi unik dalam antara muka web, membolehkan pengguna memilih satu pilihan daripada kumpulan. Untuk meningkatkan daya tarikan visual mereka, selalunya wajar untuk menggayakan label yang dikaitkan dengan butang radio yang dipilih.

Masalahnya:

Anda telah menghadapi cabaran semasa cuba gunakan gaya pada label butang radio yang dipilih menggunakan CSS. Coretan kod semasa anda termasuk yang berikut:

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

Mengenal pasti Isu:

Pemilih CSS ini tidak berfungsi kerana pemilih adik beradik bersebelahan " " hanya sepadan dengan contoh pertama unsur yang mengikutinya. Walau bagaimanapun, dalam kod HTML anda, label anda tidak bersebelahan dengan elemen input serta-merta.

Penyelesaian:

Untuk menggayakan label butang radio yang dipilih, Pemilih CSS mesti menyasarkan secara khusus elemen label yang dikaitkan dengan input yang diperiksa. Ini boleh dicapai menggunakan atribut 'for' dalam label dan atribut 'id' dalam elemen input masing-masing, seperti yang ditunjukkan dalam kod berikut:

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.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 melaraskan pemilih CSS, kod kini menyasarkan label butang radio terpilih dengan betul dan menggunakan penggayaan yang diingini.