firefox 100+ 必须显式声明 -moz-appearance: none 才生效，仅写 appearance: none 无效；需三者并存且顺序为 -webkit-appearance: none; -moz-appearance: none; appearance: none。
Firefox 100+ 必须加 -moz-appearance: none 才生效
只写 appearance: none 在 Firefox 100 及以上版本里完全无效，不是你漏了选择器或优先级问题，而是 Mozilla 明确要求厂商前缀必须显式声明。Chrome 和 Safari 能 fallback 到标准属性，Firefox 不会。
实操必须三者齐备，且顺序不能颠倒：
-
-webkit-appearance: none（覆盖 Safari/Chrome） -
-moz-appearance: none（Firefox 100+ 强制要求） -
appearance: none（标准属性，作兜底）
漏掉 -moz-appearance，Firefox 就当没这回事，原生箭头照常显示，background-image 或 ::after 全部被压在下面看不见。
background-image 在 Firefox 中不显示的常见原因
Firefox 对 select 的 background-image 渲染有额外限制：它只在 background-color 显式设为非透明值时才绘制背景图；设成 transparent 或省略，背景图直接丢弃。
正确写法要同时满足三个条件：
-
background-color: #fff（或任意不透明色，不能是transparent） -
background-image: url("data:image/svg+xml,%3Csvg...%3E")（SVG 必须 URL 编码，不能含空格或换行） -
background-position: right 12px center（用固定像素偏移，right 5%或calc()在 Firefox 中常失效）
另外，background-size 建议显式设为 16px，别依赖 auto —— Firefox 有时会把 SVG 缩成一个点。
伪元素 ::after 在 Firefox 中定位偏移、点击失灵
Firefox 下 select::after 默认相对 content box 定位，但它的 content box 高度受字体度量影响极大，top: 50% + transform: translateY(-50%) 仍可能错位 1–2px，更严重的是：没设 pointer-events: none 时，伪元素会拦截点击，导致下拉菜单打不开。
关键修复点：
- 给
select加position: relative（否则::after会相对于父容器定位） -
::after必须带pointer-events: none（否则整个右侧热区失效） - 垂直居中改用
top: 50%; transform: translateY(-50%)，别用line-height或height控制 -
padding-right至少留出32px，否则自定义箭头和文字重叠，Firefox 渲染更易挤在一起
iOS Safari 和 Firefox 双重失效时的兜底策略
当同时面对 Firefox 箭头残留 + iOS Safari appearance: none 失效，不要堆砌更多 hack，优先保功能、再保样式。
最轻量可靠的兜底组合：
- 强制
border-radius: 0（触发 Safari UA 样式降级逻辑，让height和padding生效） - 用
min-height: 44px替代height（保障 iOS 触摸热区，也避免 Firefox 因 line-height 计算异常导致高度塌陷） - 放弃
background-image，改用::after+border画三角形（纯 CSS，无编码/路径兼容问题） - 保留
label[for]和name属性，哪怕箭头没换成功，表单提交和可访问性也不崩
真正难搞的从来不是“怎么让它看起来一样”，而是“怎么让它在 Firefox 里能点开、在 Safari 里不闪退、在屏幕阅读器里被识别为 select”。样式只是表层，交互链路不断才是底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
