select::-ms-expand{display:none}是IE10/11及旧Edge中隐藏默认箭头的唯一有效方式，因这些浏览器不支持appearance属性；Chrome/Edge新版则依赖appearance: none及其前缀。
select::-ms-expand 在 Edge/IE 中失效
这是最常见却最容易被忽略的问题：你写了 appearance: none，也加了 -webkit-appearance: none 和 -moz-appearance: none，但 IE 10/11 或旧版 Edge 里箭头还在。原因就是这些浏览器根本不认 appearance，只响应 select::-ms-expand 这个伪元素。
必须单独写这一条，并确保它没被其他 CSS 覆盖或误写成 ::-ms-expand（漏了 select 前缀）：
select::-ms-expand {
display: none;
}
注意：::-ms-expand 仅在 IE 10+ 和旧 Edge（EdgeHTML 版本）中有效；Chromium 内核新版 Edge 已不支持，靠 appearance: none 就够。
background-image 覆盖了箭头但位置错乱
用 background-image 替换箭头时，常出现图标偏左、被文字遮挡、或在不同宽度下错位。根本原因是 background-position 的百分比值依赖于整个 select 元素的宽高，而实际可渲染区域还受 padding、border、box-sizing 影响。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是：
- 固定
padding-right（比如25px），为图标留出确定空间 - 用
background-position: right 10px center（像素值比百分比更可控） - 确保
background-size明确，避免 SVG 图标缩放失真 - 加上
background-repeat: no-repeat，否则小图标可能平铺
示例：
select {
padding-right: 25px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666'><path d='M0 3l6 6 6-6z'/></svg>");
background-position: right 10px center;
background-repeat: no-repeat;
}
appearance: none 在 Firefox 中不生效
Firefox 从 34 版起才支持标准 appearance: none，但如果你用了 !important 覆盖了它，或者父级有 all: revert 类样式重置，就可能让该声明被忽略。
验证方式很简单：打开开发者工具，选中 select 元素，在 Styles 面板里搜 appearance，看是否被划掉（表示被覆盖）或灰色（表示不支持）。常见干扰项包括：
- 某些 UI 框架（如 Ant Design、Layui）自带全局 reset，会重置
appearance - CSS-in-JS 库注入的样式优先级更高，压过了你的规则
-
select被套在.layui-form-select等容器里，实际生效的是容器样式而非原生select
解决办法：提高选择器特异性，例如写成 body select:not([disabled])，或加 !important（仅当确认无更好方案时）。
隐藏后下拉面板被容器裁切
箭头是没了，但点击后下拉选项列表只显示半截——这不是 CSS 隐藏问题，而是布局层级问题。典型场景是 select 在 overflow: hidden 的弹窗、卡片或 Modal 里。
此时 appearance 和 background 都正常，但下拉面板（由浏览器原生渲染）被父容器裁剪。解决方案不是改 select 样式，而是：
- 给父容器加
overflow: visible（如果可行） - 对使用框架的项目（如 Element Plus、Ant Design），检查是否启用了
teleport并指定挂载点（如teleport="body"） - 手动提升下拉面板的
z-index（需配合定位和非static的position）
这个环节容易误以为是“CSS 没隐藏干净”，其实箭头和下拉面板是两个独立渲染层，处理逻辑完全不同。
