Firefox中appearance: none生效但箭头仍显示，因其箭头是绘制在padding区的合成图形；须三重压制：成对声明appearance与-moz-appearance、内联SVG background-image、足够padding-right预留空间。
Firefox 里 appearance: none 不生效的真正原因
不是写错了，也不是漏了前缀——appearance: none 在 Firefox 中本身是生效的，但它的作用仅限于“移除原生控件外壳”，并不等于“让箭头消失”。Firefox 的下拉箭头是绘制在控件右侧 padding 区域内的合成图形，不依赖伪元素，也不响应 background-image 覆盖，除非你同时切断它的默认渲染路径。很多开发者加了 -moz-appearance: none 就以为万事大吉，结果发现箭头还在，只是位置偏了或颜色变了。
必须同时处理的三个 CSS 层级
只改 appearance 是单点突破，Firefox 需要三重压制：
-
appearance: none和-moz-appearance: none必须成对出现，缺一不可（-webkit-appearance: none可选，但建议保留） -
background-image必须用 data URL 写死 SVG，不能用外部链接（Firefox 对外部图片在select上的加载策略更保守） -
padding-right值必须 ≥background-size宽度 + 间距，否则自定义箭头会被裁掉或压住文字
针对 Firefox 的最小可靠样式块
以下代码在 Firefox 115+（含 ESR）、Chrome 120+、Edge 120+、Safari 17+ 均验证可用，不依赖 JS：
select {
-webkit-appearance: none;
-moz-appearance: none;
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-6' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px 6px;
padding-right: 32px;
border: 1px solid #ccc;
border-radius: 4px;
}
注意：background-position 里的 10px 是离右边缘的距离，不是图标自身偏移；padding-right: 32px 是硬性预留空间，少于这个值，Firefox 会把文字顶到图标上。
立即学习“前端免费学习笔记（深入）”；
为什么 ::-ms-expand 和 @-moz-document 都不该用
::-ms-expand 已被 MDN 标记为非标准，Edge Chromium 和 IE Mode 下行为不一致，2026 年起多数构建工具会警告；@-moz-document url-prefix() 是 Firefox 旧版 hack，从 91 版本起失效，且会干扰 CSS 压缩器识别规则。真正需要区分的只有两点：是否支持 appearance（所有现代 Firefox 都支持），以及是否允许 background-image 渲染到 select 右侧（Firefox 允许，但要求尺寸明确、URL 内联）。把精力花在这两个点上，比套一堆过时条件判断更稳。
