直接改 的 background 经常失效，因为浏览器（尤其 chrome、safari）强制用系统渲染下拉控件，忽略 background 等样式；需同时设 -webkit-appearance: none 和 -moz-appearance: none 才能生效。
直接改 <select></select> 的 background 为什么经常失效
因为浏览器对 <select></select> 的样式控制极强，尤其在 Chrome、edge（Chromium 内核）和 Safari 中，原生下拉控件的背景、边框、箭头等默认由系统渲染，background、background-color 等 CSS 属性常被忽略或部分覆盖。不是写错了，是被“劫持”了。
常见错误现象：background: #ff6b6b; 写了但毫无反应；加了 !important 还是白搭；在 firefox 上看着正常，切到 Chrome 就退回默认灰白。
- 必须同时重置
-webkit-appearance: none;（Chrome/Edge/Safari）和-moz-appearance: none;（Firefox），否则样式根本不生效 - 去掉原生外观后，箭头图标会消失，需手动补一个（比如用伪元素或背景图）
- 移动端 ios Safari 对
appearance支持有限，部分版本仍强制渲染原生样式，无法完全自定义背景
appearance: none 后怎么安全地设背景色和圆角
去掉原生外观只是第一步，后续样式要“兜底”：既要覆盖默认渲染残留，又要避免破坏可访问性与交互逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<select></select>设background-color（别只用background，避免图片干扰） - 加上
border-radius和border，否则圆角在某些浏览器中不生效 - 确保
padding足够，防止文字贴边（特别是右侧，要为自定义箭头留空间） - 用
color和font显式声明文字样式，避免继承导致对比度不足
示例片段：
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #4a5568; color: #e2e8f0; border: 1px solid #2d3748; border-radius: 6px; padding: 8px 12px 8px 16px; }如何补右箭头且不破坏屏幕阅读器支持
去掉 appearance 后，原生下拉箭头没了，用户可能误以为这是个普通输入框。不能只靠视觉补图标，还得保留语义。
关键点：
- 用
::after伪元素画箭头（如content: "▼";或 SVG base64），并设pointer-events: none;避免遮挡点击区域 - 绝对定位时，父
select必须有position: relative; - 不要删掉
<select></select>自带的role="combobox"和aria-expanded状态——这些由浏览器自动维护，手动干预反而易出问题 - 如果用自定义 wrapper 包裹
<select></select>（比如为了更灵活布局），务必把id和aria-labelledby正确关联
iOS Safari 和旧版 android webview 的兼容底线
在 iOS 上，即使写了 appearance: none，<select></select> 点击后弹出的下拉面板仍是系统原生样式，背景无法更改。你只能控制“触发按钮”部分，而非整个下拉菜单。
这意味着：
- 别试图用 CSS 改变 iOS 弹出层的背景——做不到
- 如果项目必须统一视觉，得考虑用纯 js 实现的下拉组件（如
choices.js或tom-select），但代价是增加 bundle 体积、失去原生滚动性能、需额外处理键盘导航和屏幕阅读器 - Android WebView（尤其 Android 4–6）对
appearance支持极差，建议加降级样式：background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);模拟箭头，同时保持背景色可用
真正难的不是写几行 CSS，而是判断：这个下拉到底需要多大程度的定制？改按钮就够了，还是连弹层都得换？后者几乎等于重做控件。