必须先设appearance: none，否则border、padding等样式会被忽略；需同时写-webkit-appearance: none、-moz-appearance: none和appearance: none，并用::-ms-expand隐藏IE/Edge箭头。
直接重置 select 默认样式必须干掉 appearance，否则所有 border、padding、border-radius 都可能被浏览器忽略。
为什么 appearance: none 是第一步
Chrome、Safari、Firefox 对 select 的渲染依赖系统控件，不加 appearance: none 就像试图给按钮贴纸——表面改了，底层还是原生逻辑在跑。只写 border 或 background 很可能完全无效，尤其在 macOS Safari 下连 border-radius 都会被截断。
必须同时写三行：
-
-webkit-appearance: none（Chrome / Safari） -
-moz-appearance: none（Firefox） -
appearance: none（标准语法，2026 年已全平台支持）
漏掉任意一个，都可能在某个浏览器里箭头还在、圆角失效、或点击区域错位。
立即学习“前端免费学习笔记（深入）”；
IE 和 Edge 旧版的下拉箭头怎么隐藏
IE10+ 和旧版 Edge 不吃 appearance: none，得单独处理 ::-ms-expand 伪元素：
select::-ms-expand {
display: none;
}
注意：这个规则只对 IE/Edge 有效，其他浏览器会忽略；但如果不加，IE 里右下角那个灰色三角会顽固地盖在你自定义的背景图上。
常见错误是误写成 ::-ms-input-placeholder 或漏掉冒号数量——必须是两个冒号 + ms-expand。
自定义下拉图标该用 background 还是伪元素
用 background 最稳：
- 兼容性好，iOS Safari、Android WebView 都支持
- 不会遮挡点击区域（伪元素
::after在select上 iOS 不渲染，或 z-index 失效） - 配合
padding-right留出空间，比如padding-right: 32px，再设background-position: right 10px center
别用 ::before/::after 直接覆盖 select —— 它们无法响应鼠标事件，且在部分安卓机型上触发不了下拉菜单。
reset 按钮点击后 select 不回退到第一个 option
问题不在样式，而在 DOM 状态没清干净。常见写法 select.value = '' 或 select.selectedIndex = 0 表面有效，但若第一个 option 没设 value（比如 <option>请选择</option>），select.value 实际是空字符串，而 selectedIndex = 0 又可能被后续 JS 覆盖。
安全做法是两步走：
- 先清除所有
selected属性：select.querySelectorAll('option').forEach(opt => opt.removeAttribute('selected')) - 再显式选中第一个可用项：
select.options[0].setAttribute('selected', '')
如果第一个 option 是 disabled 占位符（如 <option disabled selected>请选择</option>），记得跳过它，选第二个 option，否则用户点开下拉时第一项不可选，体验断裂。
真正难的不是让箭头消失，而是让「禁用态」「聚焦态」「验证失败态」在所有浏览器里都表现一致——比如 :focus-visible 在 Safari 里默认不触发，得靠 outline 手动兜底；又比如 invalid 状态下 background 变红，但 Android Chrome 仍保留原生高亮色块。这些细节不测真机根本发现不了。
