原生无法直接用background或color深度定制，因浏览器对渲染控制极强，windows chrome/edge及旧版safari常忽略background、padding、border-radius等样式；真正可控方案是用+模拟下拉，配合aria属性、键盘导航与焦点管理确保可访问性。
下拉列表 <select></select> 为什么不能直接用 background 或 color 定制？
因为浏览器对 <select></select> 的原生渲染控制极强，尤其是 Windows 上的 Chrome、Edge 和旧版 Safari，background、padding、border-radius 等样式在某些引擎里会被忽略或部分失效。你写的样式看似生效，点开下拉后箭头消失、文字错位、选项背景没变——这不是你写错了，是浏览器故意“不听”。
真正可控的定制方式：用 <div> + <code><ul></ul> 模拟下拉（推荐方案）
放弃直接改 <select></select>，转而用语义化结构模拟：一个可点击的触发区（div.select-trigger），一个隐藏/显示的选项列表（ul.select-options）。这样所有样式都由你完全掌控。
- 必须给
ul设position: absolute和z-index，否则被其他元素遮挡 - 用
aria-expanded和aria-haspopup="listbox"保持可访问性，否则屏幕阅读器无法识别 - 键盘支持不能少：监听
ArrowDown/ArrowUp切换选项，Enter或Space确认，Escape关闭 - 不要用
display: none控制显隐——它会让焦点管理失效；改用visibility: hidden+opacity: 0+pointer-events: none
appearance: none 能否救急？哪些浏览器真支持？
加 appearance: none 是绕过原生样式的第一步，但它只在部分场景有效：
- Firefox 和较新 Chrome（115+）支持完整定制
<select></select>的边框、圆角、文字颜色 - Safari 需要额外加
-webkit-appearance: none，且仍无法修改下拉箭头颜色（只能用background-image覆盖） - IE 完全不支持，Windows 旧版 Edge（EdgeHTML）也基本无效
- 即使加了
appearance: none，iOS Safari 仍会强制显示灰色背景和固定高度，height设置常被忽略
所以仅当项目明确限定现代桌面浏览器、且只需微调外观时，才考虑这条路径。
自定义箭头图标怎么替换又不失语义？
别用纯 background-image 覆盖，那样无法适配暗色模式、缩放或高对比度设置。正确做法：
- 在
.select-trigger::after里用 SVG 内联 base64 或url("data:image/svg...")，确保清晰缩放 - SVG 中避免硬编码颜色，改用
currentColor继承父级文字色 - 给箭头容器加
pointer-events: none，否则会拦截点击事件 - 用
transform: rotate(0.5turn)实现展开/收起动画，比 JS 切换 class 更轻量
复杂点不在写多少 CSS，而在是否预留了键盘导航、焦点管理、屏幕阅读器播报这些“看不见”的链路——漏掉任意一环，定制就只是视觉糖衣。
