iOS中appearance: none无法清除select展开时的黑底蒙层，因WebKit强制干预下拉面板渲染，该面板由UIKit驱动且不受CSS控制，background等样式仅作用于收起态容器。
appearance: none 在 iOS 上无法完全清除 select 样式，根本原因不是它没生效，而是 Safari（WebKit）对 select 元素做了**强制视觉层叠干预**：即使你设了 background: transparent 或 background: none，iOS 仍会在下拉展开时渲染一层深色半透明蒙层（常表现为黑底+阴影），且该蒙层不受 CSS 控制。
为什么 appearance: none 后背景还是黑的
这是 WebKit 的硬编码行为——-webkit-appearance: none 只影响「非展开态」的控件外观（比如去掉默认箭头、圆角、内边距），但不干涉系统级下拉面板（ 展开后弹出的原生 Picker）的渲染逻辑。这个 Picker 是由 UIKit 的 UIPickerView 或 UIDatePicker 驱动的，Web 页面无权覆盖其背景色。
- 你看到的“黑底”其实是 iOS 系统 Picker 的默认主题色（深色模式下更明显）
-
background相关声明只作用于select元素自身容器，对弹出层无效 - 伪元素（如
::after）也无法穿透到系统弹层中
background 设置必须配合 position 和 z-index 才有效
自定义背景（比如用图片箭头或三角形）要真正可见，得确保它不被 iOS 的默认箭头残留或文字遮挡。常见失效是因为层级或定位错位：
- 必须给父容器加
position: relative，否则::after伪元素会脱离文档流乱飘 - 若
select有padding-right，而你又用background-position: right放箭头，容易被截断——建议改用padding-right: 30px预留空间 - 某些 iOS 版本（如 iOS 16.4+）会对
background-image做抗锯齿处理，导致小尺寸 SVG 箭头模糊，推荐用 base64 内联或明确设background-size: 12px 12px
真正能影响下拉面板样式的只有两个入口
目前没有标准 CSS 能改系统 Picker 的背景，但有两个间接控制点：
-
color-scheme: light或color-scheme: dark—— 强制页面使用指定配色方案，可能让 Picker 背景从黑变灰（取决于系统设置，不保证） -
meta name="apple-mobile-web-app-capable" content="yes"+ 添加到主屏幕后以 PWA 模式运行 —— 此时部分 iOS 版本会弱化 Picker 的深色蒙层（实测 iOS 17.5 中较明显）
除此之外，所有试图用 background、box-shadow 或伪类覆盖弹出层的尝试都会失败——这不是写法问题，是平台限制。
最稳妥的兼容方案其实是放弃纯 CSS
如果项目对下拉样式一致性要求极高（比如设计稿明确要求白底无阴影），别硬刚 appearance，直接换方案：
- 用
div+ul/li模拟下拉，配合click+focusout控制显隐（注意处理键盘导航和 VoiceOver） - 引入轻量库如
choices.js或tom-select，它们在 iOS 上会自动 fallback 到模拟下拉 - 接受原生体验，在 CSS 中仅优化收起态（字体、边框、箭头），不对展开态做任何假设
最后一句提醒：iOS 下 select 的“不可定制性”是故意设计的，不是 bug。越早认清这点，调试时越少怀疑自己写的 CSS 有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
