appearance: none 不是万能开关，它在 safari 和旧版 android webview 中无法解绑原生控件逻辑，自定义箭头失败是浏览器主动限制所致，非代码错误。
直接说结论：appearance: none 不是万能开关，它在 Safari 和旧版 Android WebView 中根本不能“解绑”原生控件逻辑，所以自定义箭头失败不是你代码写错了，而是浏览器故意不让你动。
为什么 background-image 在 Safari 里经常不显示
Safari（尤其是 iOS 15.4–17.x）对 background-image 的解析极其严格：data URL 中任意空格、未转义的引号、换行或 SVG 编码错误都会导致整个背景失效；background-position: right 8px center 这类写法也常被忽略，Safari 更认 background-position: 100% 50%。
- 用 base64 编码 SVG 时，务必去掉所有换行和空格，用单引号包裹 URL
- 避免用
right/top关键字，改用百分比或像素值，比如background-position: 94% 50% - 加
background-repeat: no-repeat和background-size: 12px，否则某些安卓 WebView 会拉伸图标
怎样让 appearance: none 在 iOS 真正生效
只写 appearance: none 和 -webkit-appearance: none 是不够的。iOS Safari 会继续用 UA 样式覆盖 height、padding、border-radius —— 除非你主动触发它的“兜底渲染路径”。
- 必须加
border-radius: 0，这是关键触发点，它会让 Safari 放弃系统级圆角逻辑，从而允许height和padding生效 -
line-height对select完全无效，别试 - 如果父容器是 Flex 布局，记得加
align-items: center，否则文字常偏上 - iOS 16.4 仍有 bug，若箭头残影残留，补一句
background-color: #fff覆盖底层灰色
安卓端下拉箭头错位、点击高亮清不干净怎么办
安卓原生 WebView（尤其旧版 Chrome）对 select 渲染粗暴：默认灰色背景、点击后深色高亮、箭头位置飘忽、边框模糊——光靠 appearance: none 搞不定。
- 清除点击反馈：
*{-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0);} - 重置背景必须写实色，不能只写
transparent，否则 fallback 成深灰；推荐background-color: #fff - IE/Edge 旧版要单独处理：
select::-ms-expand { display: none; } - 若仍见残影，说明系统箭头没被完全压制，此时可加
padding-right: 32px并用::after伪元素画箭头（但仅限单行，且需同步控制pointer-events: none）
最易被忽略的一点：跨平台一致性 ≠ 全靠 CSS 解决。当你发现 appearance: none + background-image 在三个平台各失效一次，就该意识到这不是样式问题，而是浏览器对原生控件的权限限制本身。真要 100% 可控，得用 div + ul + JS 模拟，或者等 appearance: base-select 在 Chrome 135+ 稳定落地——但目前生产环境别赌这个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
