javascript - 选中时更改标签颜色单选

Question

我在检查单选按钮后如何将单选按钮的标签文本颜色更改为蓝色时遇到问题。我遵循了许多示例代码，但它不起作用。

下面是我的html代码

<div class="input-group">
   <label for="pickup-1" class="radio-custom-label">10.00 PM</label>  
   <div class="text-group-field pickup-day choose-time">
     <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
   </div>
</div>

Answer 1

您需要稍微更改您的 HTML 结构并使用 ~ ( General Sibling Combinator ) 选择器，例如:

.radio-custom:checked ~ label {
  color: blue;
}

看看下面的片段:

.radio-custom:checked ~ label {
  color: blue;
}

label {
  display: block;
  flex: 1;
}

.input-group {
  display: block;
}

.text-group-field {
  padding: 10px;
}

.inner-block {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

<div class="input-group">
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-1" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-2" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-3" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-3" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
</div>

希望这对您有所帮助!