appearance: none需配合background: none、-moz-appearance: none、-webkit-appearance: none及min-height: 44px等设置才能生效，否则箭头残留、定位偏移或点击失效。
Chrome/Firefox里appearance: none失效怎么办
直接给select加appearance: none在某些Chrome版本或Firefox中可能没反应，不是写错了，而是浏览器对原生控件的保护逻辑变强了。必须配合background重置和padding微调才能真正“接管”渲染权。
- 只设
appearance: none但没动background：箭头还在，只是被默认背景盖住了一半，实际没移除 - 必须显式设置
background: none或background-color: transparent，否则伪元素画的箭头会被原生背景吞掉 - Firefox 100+ 要求同时加
-moz-appearance: none，只写标准属性不够 - 移动端Safari需要
-webkit-appearance: none，且padding-right至少留出24px空间给自定义箭头
::after伪元素画箭头时位置偏移、不居中
伪元素默认是相对select内容盒（content box）定位的，但select的内边距和行高在各浏览器中差异大，直接用right: 10px; top: 50%大概率不准。
- 给
select加position: relative，否则::after会相对于父容器定位 - 用
transform: translateY(-50%)代替top: 50%，避免字体度量误差导致垂直错位 - 横向对齐优先用
right: 12px这类固定值，别依赖text-align: right——下拉框文字对齐方式不影响伪元素 - 如果下拉项有图标或缩进，
padding-right要同步加大，否则自定义箭头会和文字重叠
自定义箭头在iOS Safari上点击区域变小
iOS Safari对select的触摸热区有硬性最小尺寸（约44×44px），一旦用appearance: none清除了原生样式，又没补足可点区域，就会出现“点了没反应”或“必须精准点箭头才触发”的问题。
- 必须给
select设置min-height: 44px，不能只靠height -
::after的width/height建议设为16px，再用padding-right: 32px腾出足够热区空间 - 避免用
pointer-events: none在伪元素上——这会让整个右侧区域失去响应 - 测试时真机连Mac用Web Inspector，模拟器的触摸行为和真机不一致
用SVG代替三角形字符做箭头更可控
用content: "▼"这种Unicode字符看着简单，但字号缩放时容易模糊、粗细不均，且无法单独调颜色或旋转方向（比如展开/收起状态切换）。
立即学习“前端免费学习笔记（深入）”；
- 把SVG内联进
content属性：content: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="%23666"></path></svg>"); - URL编码里
#要写成%23，空格写成%20，否则解析失败 - SVG的
viewBox比固定宽高更适配缩放，fill可直接用CSS变量，比如fill: var(--arrow-color, #666) - 需要翻转方向时，改
transform: scaleY(-1)比换字符可靠，也方便加transition
