Как менять иконку у отмеченной Radiobutton?

Question

[Alx Dayv]

Всем привет!
Помогите сообразить, как можно в форме созданной плагином Contact Form 7 в Wordpress,
На радиокнопках менять фон и иконку в зависимости от выделенной кнопки?
На тестовом голом HTML/CSS получается. Переношу на форму сгенерированную CF7 - не работает ((
https://codepen.io/alxdayv/pen/ZENPmPV - это тестовый
Но вот при переносе на форму CF7 - не могу понять какой надо писать селектор, чтобы также менялась выделенная радиокнопка.

<div class="radio_container">
          <p>
            <span class="wpcf7-form-control-wrap" data-name="contact-method"
              ><span class="wpcf7-form-control wpcf7-radio connection_icon"
                ><span class="wpcf7-list-item first"
                  ><label><input type="radio" name="contact-method" value="phone" checked="checked" /><span class="wpcf7-list-item-label">phone</span></label></span
                ><span class="wpcf7-list-item"
                  ><label><input type="radio" name="contact-method" value="telegram" /><span class="wpcf7-list-item-label">telegram</span></label></span
                ><span class="wpcf7-list-item"
                  ><label><input type="radio" name="contact-method" value="whatsapp" /><span class="wpcf7-list-item-label">whatsapp</span></label></span
                ><span class="wpcf7-list-item last"
                  ><label><input type="radio" name="contact-method" value="sms" /><span class="wpcf7-list-item-label">sms</span></label></span
                ></span
              ></span
            >
          </p>
        </div>

/* Стили для активных (выбранных) состояний */
.radio_container .wpcf7-list-item:nth-child(1) input[type='radio']:checked + label {
  background-image: url('https://redpxl.ru/wp-content/uploads/2024/06/phone-w.svg'); /* Белая иконка телефона */
  background-color: #ff3134;
}

.radio_container .wpcf7-list-item:nth-child(2) input[type='radio']:checked + label {
  background-image: url('https://redpxl.ru/wp-content/uploads/2024/06/telegram-w.svg'); /* Белая иконка телеграм */
  background-color: #ff3134;
}

.radio_container .wpcf7-list-item:nth-child(3) input[type='radio']:checked + label {
  background-image: url('https://redpxl.ru/wp-content/uploads/2024/06/whatsapp-w.svg'); /* Белая иконка вотсап */
  background-color: #ff3134;
}

.radio_container .wpcf7-list-item:nth-child(4) input[type='radio']:checked + label {
  background-image: url('https://redpxl.ru/wp-content/uploads/2024/06/mail-w.svg'); /* Белая иконка СМС */
  background-color: #ff3134;
}

.radio_container .wpcf7-list-item:nth-child(1) input[type='radio']:checked + label видимо тут что-то не правильно я делаю, что не выделяется то что должно (((
Поправьте, если можно - что не правильно делаю?

Answer 1

[Ваня Зорин]

В коде cf7 тег label оборачивает input, а не находится за ним. Так что лучше применить :has(), вот так:

.radio_container .wpcf7-list-item:nth-child(1) label:has(input[type='radio']:checked)

Comments

[Alx Dayv]

Спасибо! Попробую так.

[Alx Dayv]

О да! Все заработало!
Большое спасибо!
Три дня промучался )))) Добби свободен!

[Ваня Зорин]

Alx Dayv, правда, поддержка у селектора has небольшая. 92%. Тогда лучше все же подключить js обработчик. Я в js не опытен, предлагаю вот так вот:

let previousChoice = null;
document.querySelectorAll('.radio_container input').forEach((input) => {
  input.addEventListener('change', function() {
    if (this.checked) {
      this.parentNode.classList.add('example_class');
      if(previousChoice !== null) {
          previousChoice.parentNode.classList.remove('example_class');
      }
      previousChoice = this;
    }
  });
});