结论：美化移动端 select 时需保留三个兼容性锚点——select 本身可被 pointer 事件穿透、::after 箭头设 pointer-events: none、height 与 line-height 匹配且不用 padding 撑高，否则会因热区判断失效导致点击无响应。
直接说结论：用 appearance: none + 自定义箭头 + font-size: 16px 以上，基本能保原生调用不丢，但 iOS 上点击区域变小、安卓部分 WebView 会失效——这不是样式问题，是渲染层拦截了原生唤起逻辑。
为什么美化后移动端 select 有时点不动或弹不出系统选择器
根本原因不是 CSS 写错了，而是浏览器对 select 的“可点击热区”判断被干扰。比如：
-
padding设太小（尤其左右），iOS Safari 会认为点击落在“自定义箭头伪元素”上，而非select本体，导致不触发原生弹窗 - 父容器加了
overflow: hidden或transform，某些安卓 WebView（如微信 X5）会截断事件冒泡，click被吞，change也不触发 -
font-size < 16px在 iOS 上会强制缩放页面，焦点一获取就 zoom，直接破坏原生控件定位
必须保留的三个兼容性锚点
想让美化不伤功能，这三处不能动：
-
select元素本身必须可被 pointer 事件穿透——别给它设pointer-events: none，也别用z-index把它压在底层 -
::after箭头伪元素要加pointer-events: none，否则它会抢点击（尤其右边缘 hover 区域） -
select的height和line-height要匹配，且不能靠padding-top/padding-bottom撑高——否则安卓 Chrome 会把点击判定偏移到文字中线以下，点不中
change 事件比 click 更可靠，但得防重复触发
移动端 select 的 click 在 iOS 上确实常触发两次（一次 focus，一次 blur 后再 click），而 change 是唯一真正反映用户选中结果的时机：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 监听
change即可，别同时绑click和change - 如果用了自定义封装（比如基于 Swiper 的下拉面板），那原生
select就只是个“值容器”，此时change仍有效，但得手动dispatchEvent(new Event('change', { bubbles: true })) - 注意：Vue/React 中 v-model 或 value 受控时，
change触发后 DOM 的value已更新，但 React 的 synthetic event 可能还没 flush，别在change回调里立刻读ref.current.value，加个setTimeout或用useEffect监听值变化更稳
真要彻底跨端一致？原生 select 就别硬改了
当项目明确要求 iOS/安卓/微信/H5 页面表现完全一致，且允许放弃原生滚动惯性、语音输入、无障碍焦点顺序时，才考虑全量替换为 JS 实现的下拉面板。但代价明显：
- 失去系统级键盘导航（Tab 切换、空格展开）
- 屏幕阅读器需额外写
aria-expanded、aria-controls等属性补全语义 - 微信内嵌 WebView 对
position: fixed+transform组合有渲染 bug，下拉面板容易错位 - 用户长按复制选项文本的功能直接消失
多数场景下，接受原生 select 在各端“长得不一样但都能用”，比强求视觉统一更省心——毕竟用户只关心能不能选，不关心箭头是不是 SVG 画的。
