自定义Radio/Checkbox组件checked状态CSS样式无法正常生效问题求助

我一眼就看出问题出在DOM结构和CSS选择器不匹配上，咱们一步步来修复：

问题根源 #

你当前的DOM结构里，.custom-checkbox是input的前序兄弟元素，但你的CSS写的&:checked .custom-checkbox是在找input的后代元素——CSS目前没有办法选择前面的兄弟，所以这个选择器完全不会生效。另外，opacity:0的input最好加上绝对定位，避免它占据页面布局空间，同时保证点击区域正常。

修复方案 #

1. 调整DOM结构 #

把input移到.custom-checkbox前面，这样我们就能用CSS的兄弟选择器选中它后面的自定义框：

<label htmlFor="delivery-type" className="custom-checkbox-label">
  <input id="delivery-type" type="radio" onChange={() => alert(1)} />
  <div className="custom-checkbox"></div>
</label>

2. 修正CSS选择器 #

使用**相邻兄弟选择器+**来选中checked状态input后面的.custom-checkbox，同时优化input的样式：

.custom-checkbox-label {
  position: relative;
  cursor: pointer;

  .custom-checkbox {
    background: #ffffff;
    border: 1px solid #cccccc;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    // 让自定义框和input对齐
    display: inline-block;
    vertical-align: middle;
  }

  input[type='radio'] {
    opacity: 0;
    position: absolute;
    // 确保input能被点击到
    width: 24px;
    height: 24px;
    margin: 0;

    &:checked + .custom-checkbox {
      background: #08abe1;
      // 可以再加个选中的图标样式，增强视觉反馈：
      // border-color: #08abe1;
      // position: relative;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 50%;
      //   left: 50%;
      //   transform: translate(-50%, -50%);
      //   width: 12px;
      //   height: 12px;
      //   border-radius: 50%;
      //   background: #fff;
      // }
    }
  }
}

为什么这样能生效？ #

• 把input移到前面后，&:checked + .custom-checkbox会精准匹配处于checked状态的input的下一个相邻兄弟元素，也就是我们的自定义单选框。
• 给input加position:absolute后，它会脱离文档流，不会影响布局，但依然保留点击交互能力，配合opacity:0就实现了“隐形但可点击”的效果。

你现在再测试一下，单选框的checked状态样式应该就能正常生效了～

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