如何实现带label的自定义radio input 解决选中状态不显示问题

核心问题 #

你的代码隐藏了原生单选框后，缺失了input:checked选中状态对应的视觉样式规则，导致状态切换无法被用户感知。你之前的Checkbox实现应该已经加了对应的选中状态映射规则，Radio部分漏加了，所以出现了功能差异。
实际上你当前的代码单选功能是正常生效的：打开浏览器开发者工具的元素面板，点击选项时可以看到对应input的checked属性会正常切换，只是没有关联自定义样式所以看不到选中效果。

修复方法 #

在原有CSS基础上补充选中状态的样式规则即可，示例如下：

/* 选中时外框变色 */
.blu-radio-container:has(input:checked) {
  border-color: #1677ff;
}

/* 选中时显示内部实心圆点 */
.blu-radio-container:has(input:checked)::after {
  opacity: 1;
  transform: scale3D(1, 1, 1);
  background-color: #1677ff;
}

如果需要兼容不支持CSS :has() 选择器的旧浏览器，可以微调DOM结构，把input元素移到.blu-radio-container的同级前方，再用相邻兄弟选择器写样式：

<!-- 调整后的DOM结构示例 -->
<div class="blu-radio">
  <input type="radio" id="blu-radio-3as6fzz1" name='gender'>
  <div class="blu-radio-container"></div>
  <label for="blu-radio-3as6fzz1" class="blu-radio-label">Homme</label>
</div>

对应的CSS调整为：

/* 把原来input的定位规则从.blu-radio-container input移到这里 */
.blu-radio > input {
  position: absolute;
  left: -999em;
}
input:checked + .blu-radio-container {
  border-color: #1677ff;
}
input:checked + .blu-radio-container::after {
  opacity: 1;
  transform: scale3D(1, 1, 1);
  background-color: #1677ff;
}

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