Как изменить цвет лейбла при состоянии input checked?

Question

[jack iakovenko]

подскажите как в данном коде изменить цвет бордера у лейбла при состоянии input checked?

вот код
https://codepen.io/jackyiakovenko/pen/mdxzLea?edit...

Answer 1

[Nik Faraday]

Используйте jQuery

let radios = $("[type=radio]") {
   for (let i = 0; i < radios.length; i++) {
      radios.on('click', () => {
         $("#" + radios[i].id).css('borderColor', 'YOURCOLOR');
      })
   }
}

UPD: данный код меняет цвет бордера в радиобатонах, т.к. никаких лейблов я там не вижу

Answer 2

[Mizutsune]

Вместо того чтобы пытаться менять стили тега label при состоянии :checked у input, можно использовать для стилизации элемент <span class="color-tabs__text"></span> и добавив для этого элемента - псевдоэлемент, набросать для него дополнительные стили.

Далее при выборе кнопки, можно менять внешний вид элемента <span class="color-tabs__text"></span> , а также и внешний вид его псевдоэлемента, что собственно говоря очень удобно.

Пример: