自定义HTML/CSS实现的radio单选按钮点击后无法正常选中问题求助

问题排查结果 #

• HTML标签嵌套错误：你代码中的<label>标签在文字Agree后就提前闭合了，导致单选框<input>和自定义的.radio__radio元素都没有被包裹在<label>内部，末尾还存在冗余的</label>标签。此时只有点击文字Agree能触发单选框选中，点击自定义的圆形单选区域没有任何响应。
• 你写的CSS相邻兄弟选择器.radio__input:checked + .radio__radio::after本身逻辑没有问题，只要结构正确就能正常匹配。

修复方案 #

仅需调整HTML嵌套结构，把<input>和.radio__radio都放到<label>内部即可，CSS代码无需修改：

<div>
  <label for="myRadioId" class="radio">
    Agree
    <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
    <div class="radio__radio"></div>
  </label>
</div>

修复后点击文字或自定义单选框都能触发选中状态，选中后的缩放展示效果也会正常生效。

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