原生 无法真正主题化，仅 color、background-color（选中态）、border 等基础样式可稳定生效； 样式几乎不可控，Safari/旧 Edge 完全忽略 background；聚焦边框、箭头、下拉层位置/动画均无法纯 CSS 控制；深色模式下 文字变白是系统接管，非 CSS 生效；统一主题必须用 ++JS 重写。
下拉框
浏览器对 的渲染高度受限，background、color、border 等基础属性虽可设置，但箭头图标、聚焦边框、滚动条、选项弹出层（）几乎无法用纯 CSS 统一控制。尤其在 Safari 和旧版 Edge 中， 根本不响应 background-color 或 padding。
可稳定生效的样式：
-
color和background-color（仅作用于选中态输入框区域，不影响下拉列表） -
border、border-radius、font-family、font-size、padding -
appearance: none可隐藏原生箭头（但需手动加伪元素或背景图补全）
基本无效或行为不一致的：
-
的background-color（Chrome 支持有限，Firefox/Safari 忽略） -
聚焦时的系统默认蓝框（需用outline: none+ 自定义box-shadow模拟） - 下拉菜单整体宽度/位置/过渡动画（由浏览器控制，不可 CSS 定位）
真·主题化方案：用 +
当配色必须与网站主色系（如深灰底+青蓝文字+圆角阴影）严格对齐，或需支持禁用态图标、搜索过滤、分组标题等高级功能时，放弃原生
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生
opacity: 0; position: absolute）
- 用
模拟显示区域和箭头
- 用
- 用 JS 同步选中值、处理键盘导航（
ArrowDown/Enter）、点击收起
示例结构（简化版）：
▼
别踩坑：深色模式下
很多开发者发现开启 macOS 深色模式后，color: white 生效了，而是系统 UI 层接管了渲染。一旦用户切回浅色模式，样式立即失效。更麻烦的是，部分 Windows 高对比度模式会完全忽略你设的 background，强制使用高对比色块。所以：
- 不要依赖
- 禁用状态必须靠
disabled 属性 + JS 禁止交互，不能只靠灰度 color
- 如果设计稿要求下拉菜单有圆角阴影或非矩形背景，原生控件根本做不到，必须自研
真正统一的主题控制，从来不在
+
当配色必须与网站主色系（如深灰底+青蓝文字+圆角阴影）严格对齐，或需支持禁用态图标、搜索过滤、分组标题等高级功能时，放弃原生 是唯一可靠路径。核心思路是：
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生
（opacity: 0; position: absolute） - 用 模拟显示区域和箭头
- 用
浮层承载选项，绝对定位跟随- 用 JS 同步选中值、处理键盘导航（
ArrowDown/Enter）、点击收起示例结构（简化版）：
▼别踩坑：深色模式下
文字自动变白？不是 CSS 生效，是系统级强制很多开发者发现开启 macOS 深色模式后，
文字突然变白——这并非你的color: white生效了，而是系统 UI 层接管了渲染。一旦用户切回浅色模式，样式立即失效。更麻烦的是，部分 Windows 高对比度模式会完全忽略你设的background，强制使用高对比色块。所以：- 不要依赖
的任何视觉定制做关键信息传达 - 禁用状态必须靠
disabled属性 + JS 禁止交互，不能只靠灰度color - 如果设计稿要求下拉菜单有圆角阴影或非矩形背景，原生控件根本做不到，必须自研
真正统一的主题控制，从来不在
上，而在你是否愿意为它写一个可复用的自定义组件。 - 用
