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