原生 无法真正主题化，仅 color、background-color（选中态）、border 等基础样式可稳定生效； 样式几乎不可控，Safari/旧 Edge 完全忽略 background；聚焦边框、箭头、下拉层位置/动画均无法纯 CSS 控制；深色模式下 文字变白是系统接管，非 CSS 生效；统一主题必须用 ++JS 重写。

下拉框 无法直接套用 CSS 主题，必须逐层覆盖默认样式

浏览器对 的渲染高度受限，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 定位）

真·主题化方案：用

+

+ JS 重写下拉逻辑

当配色必须与网站主色系（如深灰底+青蓝文字+圆角阴影）严格对齐，或需支持禁用态图标、搜索过滤、分组标题等高级功能时，放弃原生 是唯一可靠路径。核心思路是：

立即学习“前端免费学习笔记（深入）”；

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

下载

• 隐藏原生 （opacity: 0; position: absolute）
• 用
  模拟显示区域和箭头

• 用

  浮层承载选项，绝对定位跟随

• 用 JS 同步选中值、处理键盘导航（ArrowDown/Enter）、点击收起

示例结构（简化版）：

  
  ▼
  

    
选项一
    
选项二
  

别踩坑：深色模式下 文字自动变白？不是 CSS 生效，是系统级强制

很多开发者发现开启 macOS 深色模式后， 文字突然变白——这并非你的 color: white 生效了，而是系统 UI 层接管了渲染。一旦用户切回浅色模式，样式立即失效。更麻烦的是，部分 Windows 高对比度模式会完全忽略你设的 background，强制使用高对比色块。所以：

• 不要依赖 的任何视觉定制做关键信息传达
• 禁用状态必须靠 disabled 属性 + JS 禁止交互，不能只靠灰度 color
• 如果设计稿要求下拉菜单有圆角阴影或非矩形背景，原生控件根本做不到，必须自研

真正统一的主题控制，从来不在 上，而在你是否愿意为它写一个可复用的自定义组件。

https://www.php.cn/faq/2001359.html