optgroup 仅支持有限样式：font-weight、color、font-size、margin-top；伪元素、background、padding、display 变更等均失效；安全方案是用 data-group 属性或 unicode 缩进增强可读性。
optgroup 的 label 本身不支持伪元素、背景色或 padding 等常规样式，浏览器只允许极有限的 CSS 控制——强行“美化”大概率失效或破坏可访问性。
哪些 CSS 属性在多数浏览器中实际生效
现代 Chrome/Firefox/Edge 对 optgroup 支持以下基础样式（Safari 和 iOS 原生 select 完全忽略）：
-
font-weight：可设为bold，这是最稳妥的视觉强化方式 -
color：能改文字颜色，但部分浏览器会强制灰化（如 Firefox 默认 #666） -
font-size：可调，但不宜过大，否则可能与 option 行高错位 -
margin-top：加间距有效，用于拉开组间距离（margin-bottom通常无效）
哪些“美化”操作注定失败
以下写法看似合理，实则在至少一个主流浏览器中完全不渲染：
-
optgroup::before { content: "? "; }—— 所有浏览器都不支持optgroup上的伪元素 -
optgroup { background: #f5f5f5; padding: 4px; }——background和padding在原生下拉中被忽略 -
optgroup { display: block; }或display: flex—— 会直接导致该optgroup被浏览器跳过（整组静默消失） -
optgroup { visibility: hidden; }或opacity: 0.5;—— 不影响语义，但 label 仍可能以默认样式显示
真正安全又有效的视觉增强方案
绕过 optgroup 样式限制，用语义正确 + 渐进增强的方式提升可读性：
- 用
option的data-group属性打标：<option value="sh" data-group="华东">上海</option>，再配合 CSS：option[data-group="华东"] { margin-left: 16px; }（仅影响 option，不影响 label） - 在每个
option文本前加 Unicode 符号或空格缩进，例如：<option value="sh">● 上海</option>，确保关键信息（“上海”）仍在文本开头，兼容 Safari 键盘跳转 - 服务端或 JS 动态生成时，给
optgroup加class（如class="group-east"），再通过optgroup.group-east { font-weight: bold; }微调——虽不能加背景，但 class 是合法且被识别的
别试图让 optgroup 变成“可点击卡片”或“带图标的菜单项”。它天生就是轻量语义容器，过度定制只会换来 Safari 不显示、iOS 不播报、屏幕阅读器无法理解——真正需要复杂交互时，应该换用 Select2 或 Choices.js 这类支持无障碍的 JS 组件，而不是硬拗原生标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
