如何选择不同HTML结构下的radio/checkbox按钮进行样式定制？

你提到的两种结构确实需要调整CSS选择器逻辑，毕竟原来的相邻兄弟选择器（+）只能选中紧跟在前元素之后的节点，咱们逐个拆解解决方案：

情况1：Input嵌套在Label内部（Label包裹文本与Input） #

你的结构示例：

<label for="male"> Male <input type="radio" id="male" name="gender" /> </label>

这种场景下，input是label的子元素，直接给input加伪元素行不通（表单原生元素默认不支持伪元素），所以还是要借助label的伪元素，通过input的状态来触发样式变化。

现代浏览器推荐用:has选择器实现，写法简洁直观：

/* 隐藏原生radio按钮 */
label input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 给label添加自定义样式的伪元素按钮 */
label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

/* 当label内部的radio被选中时，修改伪元素样式 */
label:has(input[type="radio"]:checked)::before {
  background-color: #2196F3;
  border-color: #2196F3;
}

如果需要兼容不支持:has的旧浏览器，要么调整HTML把input移到label内文本的前面（就能用input:checked + span这类选择器控制文本旁的伪元素），要么借助JavaScript给label添加状态类来实现样式切换。

情况2：Label与Input同级，Label在前 #

你的结构示例：

<label for="male"> Male </label> <input type="radio" id="male" name="gender" />

这种场景下label是input的前序兄弟节点，CSS没有原生的“反向相邻选择器”，但同样可以用:has选择器实现需求：

/* 隐藏原生radio按钮 */
input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 给label添加自定义样式的伪元素按钮 */
label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

/* 当label后的radio被选中时，修改当前label的伪元素样式 */
label:has(+ input[type="radio"]:checked)::before {
  background-color: #2196F3;
  border-color: #2196F3;
}

兼容旧浏览器的话，同样可以用JavaScript辅助：监听radio的change事件，给对应关联的label添加/移除checked类，再通过类选择器控制伪元素样式：

document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 移除同组所有label的状态类
    document.querySelectorAll(`label[for][name="${this.name}"]`).forEach(label => {
      label.classList.remove('checked');
    });
    // 给当前选中项对应的label添加状态类
    document.querySelector(`label[for="${this.id}"]`).classList.add('checked');
  });
});

对应CSS补充：

label.checked::before {
  background-color: #2196F3;
  border-color: #2196F3;
}

总结 #

• 对于input嵌套在label内的结构：优先用label:has(input:checked)::before实现样式控制
• 对于label在前的同级结构：用label:has(+ input:checked)::before（或JS辅助类方案兼容旧环境）

这样就能摆脱对HTML标签顺序的依赖，灵活适配不同布局结构啦。

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