iOS Safari原生Picker完全不渲染optgroup label，所有option被扁平化排列；这是系统设计限制，无法通过CSS或JS修复，需改用JS下拉组件或服务端降级方案。
iOS Safari 原生 Picker 完全不渲染 optgroup label
这不是样式变形，而是根本没渲染——iOS 系统弹出的原生选择器（Picker）会把所有 option 扁平化排列，optgroup 的 label 被彻底忽略。用户在 iPhone 上点开下拉，看到的是“iPhone 15”“Galaxy S24”“iPad Pro”混排，毫无分组提示。
这个行为是 Safari 明确的设计限制，不是 bug，也无法通过 CSS 或 JS 修复。所有现代 iOS 版本（包括 iOS 17/18）均如此。
常见误判：
– 把 iOS 表现当成“样式错位”去调 padding 或 font-size
– 在 DevTools 里看到 DOM 有 optgroup，就以为移动端也能显示
– 用 appearance: none 强制自定义样式，但原生 Picker 不响应该属性
optgroup 的 CSS 定制能力在移动端几乎为零
即使在 Android Chrome 或桌面 Safari 中，optgroup 支持的样式也极有限：
立即学习“前端免费学习笔记（深入）”；
-
color基本可用（灰色标题可调色） -
background-color在 iOS 原生 Picker 和部分 Android WebView 中完全无效 -
padding/margin对 label 文字无作用；加在option上也常被系统覆盖 -
::before/::after伪元素在所有移动端原生下拉中均不生效
真正起效的只有：optgroup { color: #666; font-weight: bold; } —— 且仅在桌面端或部分 Android 自定义弹窗中可见。
想让移动端用户感知分组，必须放弃原生 select
如果业务逻辑强依赖分组语义（比如“请选择华东地区城市”），原生 select + optgroup 在移动端就是不可用的。替代方案只有两种：
- 用 JS 下拉组件替代：如
Choices.js、tom-select或Headless UI，它们在移动端渲染自定义弹层，能完整保留分组结构和样式 - 服务端降级：对 UA 包含
iOS或Mobile的请求，返回扁平化option列表，并在每个option文本前加标识，例如：<option value="sh">【华东】上海</option>
注意：不要试图用 disabled 或 hidden 模拟分组标题——原生 Picker 会跳过这些节点，用户更难理解。
动态插入 optgroup 时，移动端兼容性更脆弱
JS 创建分组在移动端容易静默失败：
- 用
select.appendChild(optgroup)→ iOS Safari 直接报错或忽略 - 先创建
optgroup再赋值label，但未立即调用select.add(optgroup)→ 标题不出现 - 在
DOMContentLoaded后延迟插入（如等 API 返回）→ 部分 Android WebView 渲染异常，选项顺序错乱
实操建议：
– 必须用 select.add(optgroup)，不能用 appendChild
– optgroup.label 必须在 add() 前赋值，且 .trim() 校验非空
– 若需动态加载，优先服务端直出完整 select 结构，JS 仅做显隐控制
optgroup 在桌面端看着好好的，不代表它在用户手机上存在过。别信 DOM 检查，要真机点开看。 
