Chrome和Edge中隐藏select默认箭头需设-webkit-appearance: none并重置padding-right（至少32px）、background（含自定义图标）及box-sizing，否则文字裁切或样式错位。

Chrome 和 Edge 中如何隐藏 select 的默认箭头

现代 Chromium 内核浏览器（Chrome、Edge、新版 Opera）用 ::webkit-appearance 控制原生样式，直接设为 none 会移除所有默认 UI，包括箭头，但也会导致高度塌陷、边框错位等问题。必须配合重置尺寸和自定义伪元素。

• 必须显式设置 appearance: none（带 -webkit- 前缀兼容旧版）
• 紧接着要重写 padding-right，否则文字可能被裁切——默认箭头占约 20px，建议至少留 padding-right: 32px
• 如果需要右侧自定义图标，用 background + background-position: right 8px center 更可靠，避免伪元素在某些缩放比例下错位
• 别忘了加 background-repeat: no-repeat，否则图标可能平铺

Firefox 下为什么 appearance: none 不生效

Firefox 从 v85+ 才支持无前缀的 appearance: none，且对 select 的支持仍有限制：它不会隐藏箭头，仅影响外框样式。真正起效的是 -moz-appearance: none，但该属性在较新版本中已被废弃，实际应改用 pointer-events: none 配合包裹容器实现“视觉隐藏”。

• Firefox 不响应 appearance: none 对 select 的声明，这是已知行为，不是你写错了
• 稳妥做法是用 position: relative 包一层 div，内部放 select 和绝对定位的覆盖层（如 span），再给 select 设 opacity: 0 或 pointer-events: none
• 若需保持可访问性，覆盖层必须保留 aria-hidden="true"，且 select 本身不能设 display: none 或 visibility: hidden

IE11 和旧版 Safari 的兼容处理

IE11 完全不支持 appearance，Safari 13.1 之前需依赖 -webkit-appearance: none，但即使生效，其下拉箭头位置偏移严重。这时只能接受“降级显示”，或改用 JS 驱动的自定义下拉组件（如 choices.js）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• IE11 下唯一可行方案是用 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) 隐藏 select，再用 JS 模拟交互——但成本高，仅限必要场景
• Safari 12–13.0 存在 padding-right 失效问题，建议统一用 text-indent: 0.01px 配合 overflow: hidden 把箭头挤出可视区（副作用是无法聚焦时看到焦点环）
• 所有 hack 都绕不开一个事实：原生 select 的渲染权在浏览器手里，强行隐藏必然伴随可访问性或交互退化

无障碍（a11y）和键盘导航的实际影响

隐藏箭头本身不破坏屏幕阅读器读取，但若用 opacity: 0 或 pointer-events: none 而未同步处理焦点管理，会导致键盘用户无法用 Tab 进入、Enter 展开菜单，或 ArrowDown 切换选项。

立即学习“前端免费学习笔记（深入）”；

• 确保 select 始终有 tabindex="0"（如果被包裹或样式重置后失去焦点能力）
• 若使用覆盖层方案，必须监听 keydown 并手动转发 ArrowUp/Down、Space、Enter 到原生 select 元素
• 不要用 display: none 或 visibility: hidden 隐藏 select——这会让 AT（辅助技术）完全忽略它

真正难的不是让箭头消失，而是让消失之后的控件还能被键盘操作、被屏幕阅读器识别、在不同缩放比例下不崩坏。每个浏览器都在用不同方式画那个三角，而你写的 CSS 只是在它外面盖了一块布。布的位置稍偏一点，就露馅。