原生select箭头无法直接修改位置或颜色，因浏览器不暴露其内部结构，箭头属UA控件部分；需用appearance:none移除默认样式后自定义，注意兼容性及移动端稳定性。
为什么原生 select 的箭头改不了位置或颜色
因为浏览器对 select 的内部结构不暴露给 CSS，所谓“箭头”其实是 UA（用户代理）渲染的控件一部分，不是独立元素。你不能用 margin 或 left 移动它，也不能直接 color 它——除非用 appearance: none 把整个默认样式干掉，再自己画一个。
常见错误：写 background-position: right 5px center 却发现 Safari 完全不认；或者加了 background-image 后 Chrome 箭头叠在自定义图标上，出现双箭头。
-
appearance: none和-webkit-appearance: none必须同时写，否则 Firefox 或旧版 Safari 仍显示原生箭头 - 自定义箭头推荐用 base64 SVG，避免额外请求：
background-image: url("data:image/svg+xml,%3Csvg...%3E") - 箭头右侧留白要靠
padding-right配合background-position控制，不能只调background-position - 移动端慎用自定义箭头——iOS Safari 对
appearance: none支持不稳定，点开可能变空白或失焦
select 样式兼容性最稳的写法
想让圆角、边框、字体在 Chrome/Firefox/Safari 都差不多？别碰 height + line-height 垂直居中那一套，select 的行高行为各浏览器不一致。稳妥做法是用 padding 控制高度，显式设 box-sizing: border-box。
- 基础可运行样式块（复制即用）：
select { padding: 8px 32px 8px 12px; font-size: 16px; border: 1px solid #999; border-radius: 6px; background-color: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; } - 必须加
background-size，否则 SVG 在高分屏下模糊或拉伸 - Firefox 不支持
background-image在select上的 hover 变化，所以 hover 换箭头颜色不可靠 - 如果项目需支持 IE11，放弃
appearance，老老实实接受原生箭头
移动端点击无反应或下拉失效怎么办
这不是 bug，是规范行为：onchange 在移动端常被延迟触发，甚至点选后没失焦就不发事件；更麻烦的是，某些安卓 WebView 里 appearance: none 一加，整个下拉就点不动了。
- 移动端优先保留原生控件——别强行自定义，尤其表单页。Safari 和 Chrome on Android 对原生
select的触控优化远好于 JS 模拟 - 若必须自定义，用
touchstart+preventDefault()拦住默认行为，再手动展开模拟菜单，但得同步处理键盘导航和屏幕阅读器 - 防误触：在
change事件里加简单防抖（比如setTimeout延迟 100ms），避免快速连点导致两次提交 - 测试真机！Chrome DevTools 的 device mode 无法复现 iOS Safari 的 focus/blur 时机问题
禁用状态下的 select 为什么还显示箭头
加了 disabled 属性后，Chrome 和 Firefox 会灰掉文字和边框，但箭头图标往往还在——因为 background-image 不会自动消失。这不是样式漏写，而是 disabled 状态不重置 background。
- 显式覆盖 disabled 状态：
select:disabled { background-image: none; opacity: 0.6; } - 别用
select[disabled] { background: #eee }，这样会盖掉你之前设的background-image，但又没清掉它，导致图标残留 - 如果用了
optgroup，注意disabled加在optgroup上时，其下所有option都不可选，但select自身不进入 disabled 状态，箭头照常显示 - 真正需要“不可操作+无箭头”，只能 JS 动态移除
select并插入静态文本，或者用pointer-events: none配合视觉隐藏
