原生 无法真正主题化，仅 color、background-color（选中态）、border 等基础样式可稳定生效； 样式几乎不可控，safari/旧 edge 完全忽略 background；聚焦边框、箭头、下拉层位置/动画均无法纯 css 控制；深色模式下 文字变白是系统接管，非 css 生效；统一主题必须用 ++js 重写。
下拉框 <select></select> 无法直接套用 CSS 主题，必须逐层覆盖默认样式
浏览器对 <select></select> 的渲染高度受限，background、color、border 等基础属性虽可设置，但箭头图标、聚焦边框、滚动条、选项弹出层（<option></option>）几乎无法用纯 CSS 统一控制。尤其在 Safari 和旧版 Edge 中，<option></option> 根本不响应 background-color 或 padding。
<select></select> 基础配色能改哪些、哪些改不了
可稳定生效的样式：
-
color和background-color（仅作用于选中态输入框区域，不影响下拉列表） -
border、border-radius、font-family、font-size、padding -
appearance: none可隐藏原生箭头（但需手动加伪元素或背景图补全）
基本无效或行为不一致的：
-
<option></option>的background-color（Chrome 支持有限，Firefox/Safari 忽略） -
<select></select>聚焦时的系统默认蓝框（需用outline: none+ 自定义box-shadow模拟） - 下拉菜单整体宽度/位置/过渡动画（由浏览器控制，不可 CSS 定位）
真·主题化方案：用 <div> + <code><ul></ul> + JS 重写下拉逻辑
当配色必须与网站主色系（如深灰底+青蓝文字+圆角阴影）严格对齐，或需支持禁用态图标、搜索过滤、分组标题等高级功能时，放弃原生 <select></select> 是唯一可靠路径。核心思路是：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 隐藏原生
<select></select>（opacity: 0; position: absolute） - 用
<div class="custom-select"> 模拟显示区域和箭头 <li>用 <code><ul class="dropdown-menu"></ul>浮层承载选项，绝对定位跟随 - 用 JS 同步选中值、处理键盘导航（
ArrowDown/Enter）、点击收起
示例结构（简化版）：
<div class="custom-select">
<input type="text" readonly value="请选择"><span class="arrow">▼</span>
<ul class="dropdown-menu">
<li data-value="1">选项一</li>
<li data-value="2">选项二</li>
</ul>
</div>
别踩坑：深色模式下 <option></option> 文字自动变白？不是 CSS 生效，是系统级强制
很多开发者发现开启 macOS 深色模式后，<option></option> 文字突然变白——这并非你的 color: white 生效了，而是系统 UI 层接管了渲染。一旦用户切回浅色模式，样式立即失效。更麻烦的是，部分 Windows 高对比度模式会完全忽略你设的 background，强制使用高对比色块。所以：
- 不要依赖
<option></option>的任何视觉定制做关键信息传达 - 禁用状态必须靠
disabled属性 + JS 禁止交互，不能只靠灰度color - 如果设计稿要求下拉菜单有圆角阴影或非矩形背景，原生控件根本做不到，必须自研
真正统一的主题控制，从来不在 <select></select> 上，而在你是否愿意为它写一个可复用的自定义组件。
