如何设计单选按钮：点击自定义check按钮时同步切换自身与标签颜色

问题说明 #

需要实现点击自定义的check按钮时，该按钮与对应的label标签同步改变颜色，现有代码无法达成预期效果，需调整Radio按钮的设计方案。

解决方案 #

核心思路是隐藏原生Radio按钮，通过自定义的.check元素作为视觉上的单选按钮，利用原生Radio的checked状态来控制.check和label的样式，同时确保点击自定义按钮或标签都能触发Radio的选中状态。

修改后的完整代码

HTML

<div class='container'> 
  <div class="input-container"> 
   <div class="input-box"> 
    <input type="radio" id="fiction" name="selector"> 
    <label for="fiction">
      Fiction
      <div class="check"></div> 
    </label>
  </div>
  <div class="input-box"> 
   <input type="radio" id="non-fiction" name="selector"> 
   <label for="non-fiction">
     Non-fiction
     <div class="check"></div> 
   </label>
  </div> 
 </div> 
</div>

CSS

/* 隐藏原生radio按钮 */
.input-box input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义check按钮的基础样式 */
.input-box .check {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 5px solid #ccc;
  border-radius: 50%;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
}

/* 未选中时label的默认颜色 */
.input-box label {
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 选中状态下的样式 */
.input-box input[type=radio]:checked ~ label {
  color: #0DFF92;
}

.input-box input[type=radio]:checked ~ label .check {
  border-color: #0DFF92;
}

.input-box input[type=radio]:checked ~ label .check::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0DFF92;
}

关键调整说明 #

1. 隐藏原生Radio：通过绝对定位和透明度0，让原生Radio不可见但仍能响应选中状态。
2. 调整结构：将.check元素放入label内部，这样点击自定义按钮时，会触发label关联的Radio选中，同时利用Radio的checked状态通过兄弟选择器控制label内部的.check样式。
3. 样式关联：利用input:checked ~ label选中对应的标签，再通过label .check控制自定义按钮的样式，实现同步变色效果。

内容的提问来源于stack exchange，提问作者HerbsBots00