用 appearance 属性去 select 默认箭头需分浏览器处理：Chrome/Edge 用 -webkit-appearance: none，Firefox 用 -moz-appearance: none，IE 不支持需降级；隐藏后下拉功能、可访问性均不受影响；自定义图标推荐 background 方案，注意 padding、尺寸及跨端兼容性。
Chrome/Firefox 中 select 右侧默认箭头怎么去掉
直接用 CSS 的 appearance 属性控制，但各浏览器行为不一致，不能只写一个值就完事。
- Chrome/Edge（Blink/WebKit）必须加
-webkit-appearance: none才能隐藏三角形，光写标准属性没用 - Firefox 需要
-moz-appearance: none，且它对padding-right更敏感——删了箭头后右边框容易塌陷，得手动补padding-right - IE 不支持
none值，只能用button之类降级，实际项目里通常直接放弃兼容
去掉箭头后下拉功能还能用吗
能。隐藏的是外观，不是交互逻辑。点击区域、键盘操作（ArrowDown、Enter）、屏幕阅读器识别都不受影响。
- 别误以为要去掉
select才能“定制”，那反而破坏语义和可访问性 - 如果想完全重写下拉面板（比如加图标、动画），应该保留原
select为隐藏后备，用 JS 控制显隐，而不是删掉它 - 移动端 Safari 会忽略
appearance: none，箭头照常显示——这是故意的，苹果认为用户需要视觉提示来识别可点击控件
select 自定义箭头图标怎么加
用 background 覆盖右侧区域最稳妥，比伪元素更兼容。
- 给
select设padding-right: 30px（留出图标空间），再设background: url(arrow.svg) no-repeat right 10px center / 12px - 避免用
::after伪元素：它无法绑定到select内部，且 Firefox 不支持给select加伪元素 - 图标尺寸建议 ≤14px，否则在高 DPI 屏幕上可能模糊；用 SVG 比 PNG 更安全
为什么有时加了 appearance: none 还有白边或错位
因为浏览器对 select 的内部盒模型处理不同，尤其是边框和内边距的计算方式。
立即学习“前端免费学习笔记（深入）”；
- Chrome 默认给
select加了border-radius: 2px，去掉箭头后圆角可能和自定义背景不匹配，需显式重置 - 某些旧版 Edge 会在
appearance: none后把文字往上偏移 1px，加line-height或padding-top微调即可 - 务必检查是否设置了
background-color：没设时部分浏览器会透出父容器背景，看起来像“残留边框”
