不能在<optgroup>中嵌套单选框，浏览器会解析失败并丢弃或提升非法元素；<optgroup>仅允许<option>子元素，这是HTML规范强制要求。

不能嵌套 单选框

这是硬性限制，不是“非常规”能绕开的。浏览器会直接忽略非法嵌套，甚至导致整个 渲染异常或选项消失。

<optgroup> 只接受 <option> 作为子元素 这是 HTML 规范强制要求，不是样式或兼容性问题——是解析层面的拒绝。你写成这样：

<select>
  <optgroup label="分组A">
    <input type="radio" name="x" value="1">
  </optgroup>
</select>

浏览器解析时会把 <input> 提升到 <select> 外（或丢弃），<optgroup> 内部变为空，最终可能只显示一个空分组标题，或整个下拉框不可用。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

为什么有人想这么干？常见误解场景 想在下拉菜单里混入单选按钮，比如： - 分组标题旁加个“全选”复选框 - 每组开头放一个控制开关 - 用 radio 替代 option 实现更复杂的交互逻辑

这些需求本身合理，但 <optgroup> 不是容器组件，它没有 DOM 承载能力，也不支持事件绑定或样式穿透。

真正可行的替代方案 - 如果需要“分组 + 控件”，放弃 <select>，改用 <div> + JS 模拟下拉（如用 <details> 或自定义弹层） - 如果只是想让用户从分组列表中单选，老实用 <option>，用 <optgroup> 做语义分组，再靠 CSS 或 JS 增强体验 - 如果必须保留原生 <select> 行为，所有交互入口只能是 <option>，其他控件得放在 <select> 外部（比如上方加一组独立 radio，用 JS 同步状态）

容易被忽略的细节 <optgroup> 的 label 属性不参与表单提交，也不可 focus，键盘导航（Tab/方向键）会跳过它； 移动端 Safari 和 Android Chrome 对 <optgroup> 标题的渲染高度、颜色、间距控制极弱，CSS appearance 和伪元素基本无效； 动态插入 <optgroup> 时，如果内部没至少一个 <option>，部分浏览器（如旧版 Edge）会完全不渲染该分组——别依赖 JS appendChild 后立刻可见。