Не получается в css добавить жирность при нажатии радиокнопки через :checked

Рейтинг: 0Ответов: 2Опубликовано: 02.08.2023

Подскажите, пожалуйста, как обратиться к радиокнопкам, чтобы при нажатии они выделились жирным шрифтом.

<div class="season-form">
   <form action="#">
      <label class="season-button checked-button">
         <input class="season-input" type="radio" name="seasons" checked>
         <span class="new-radio"></span>
         One
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio"></span>
         Two
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio"></span>
         Three
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio"></span>
         Four
      </label>
   </form>
</div>

Пробовала так или к родительским элементам тоже обращаться, не выходит

.season-input[type="radio"]:checked + .season-button {
    font-weight: 700;
}
css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

как обратиться к радиокнопкам, чтобы при нажатии они выделились жирным шрифтом

Такое можно реализовать используя довольно новый селектор :has() https://developer.mozilla.org/en-US/docs/Web/CSS/:has

.season-button:has(:checked) {
  font-weight: 700;
}
<div class="season-form">
  <form action="#">
    <label class="season-button checked-button">
         <input class="season-input" type="radio" name="seasons" checked />
         <span class="new-radio"></span>
         One
      </label>
    <label class="season-button">
         <input class="season-input" type="radio" name="seasons" />
         <span class="new-radio"></span>
         Two
      </label>
    <label class="season-button">
         <input class="season-input" type="radio" name="seasons" />
         <span class="new-radio"></span>
         Three
      </label>
    <label class="season-button">
         <input class="season-input" type="radio" name="seasons" />
         <span class="new-radio"></span>
         Four
      </label>
  </form>
</div>

▲ 1

Текст кнопок нужно поместить в <span></span>

input.season-input:checked ~ span {
  font-weight: bold;
}
<div class="season-form">
   <form action="#">
      <label class="season-button checked-button">
         <input class="season-input" type="radio" name="seasons" checked>
         <span class="new-radio">Winter</span>
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio">Spring</span>
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio">Summer</span>  
      </label>
      <label class="season-button">
         <input class="season-input" type="radio" name="seasons">
         <span class="new-radio">Autumn</span>
      </label>
   </form>
</div>