如何同步修改表单单选按钮SVG与文本的hover/focus/选中样式

自定义单选按钮样式，每个选项配置表情SVG图标+下方说明文本，需要实现选项在hover、focus、checked状态时，同选项内的SVG和文本透明度同步变化。当前实现中仅SVG的状态切换效果正常，文本只有hover状态样式生效，focus、checked状态的样式无法触发，需要用最少的CSS/HTML/JS代码实现需求。

现有CSS选择器仅将状态规则绑定到了SVG元素上，没有把同选项内的说明文本和单选input的状态做关联。原生单选按钮的focus、checked状态都挂载在<input type="radio">元素本身，文本元素没有匹配到input对应状态的选择器规则，自然不会触发样式变化。

无需额外编写JavaScript，仅调整CSS选择器即可实现全状态联动，改动量极小：

• 第一步：确认基础HTML结构无需额外新增冗余节点，保持标准单选结构即可

<!-- 单选项标准结构 -->
<label class="custom-radio">
  <input type="radio" name="radio-group" class="radio-origin">
  <span class="radio-svg">
    <!-- 你的表情SVG代码放在此处 -->
  </span>
  <span class="radio-text">选项说明文本</span>
</label>

• 第二步：替换原有状态相关CSS，用通用兄弟选择器关联input状态和对应元素

/* 隐藏原生单选框，注意不能用display:none，否则会丢失焦点能力 */
.radio-origin {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 统一设置图标、文本的默认样式和过渡 */
.radio-svg, .radio-text {
  opacity: 0.5;
  transition: opacity .2s ease;
}

/* hover状态：整个选项悬浮时 图标+文本同时变高亮 */
.custom-radio:hover .radio-svg,
.custom-radio:hover .radio-text {
  opacity: 1;
}

/* focus、checked状态：匹配原生input的状态，联动后面的图标和文本 */
.radio-origin:focus ~ .radio-svg,
.radio-origin:focus ~ .radio-text,
.radio-origin:checked ~ .radio-svg,
.radio-origin:checked ~ .radio-text {
  opacity: 1;
}

提示：如果你的现有结构里SVG和文本不是input的直接兄弟节点，只需要把选择器里的兄弟选择符~换成对应层级的后代选择符即可，不需要改动HTML结构。

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