可通过CSS隐藏HTML5 number输入框的微调箭头：Chrome/Edge/Safari用::-webkit-inner-spin-button和::-webkit-outer-spin-button设display: none并重置appearance，Firefox默认无箭头；不影响键盘操作、滚轮增减及无障碍支持。
在 HTML5 的 input[type="number"] 中，默认会显示上下微调箭头（spin buttons），尤其在 Chrome、Edge 和 Safari 中较明显。这些箭头对部分设计场景（如金额输入、简洁表单）会造成视觉干扰，可通过 CSS 隐藏，且不影响输入功能和键盘操作（如方向键、鼠标滚轮仍可增减数值）。
隐藏 Chrome / Edge / Safari 的微调箭头
这些浏览器基于 WebKit 或 Blink 内核，使用伪元素 ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button 控制箭头样式：
-
设为不可见：用
appearance: none移除默认样式，再配合display: none彻底隐藏 -
避免布局塌陷：加上
margin: 0和padding: 0防止因隐藏导致的宽度异常
input[type="number"] {
-webkit-appearance: none;
appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
Firefox 的处理方式
Firefox 不支持上述 WebKit 伪元素，但自 Firefox 29 起已默认不显示微调按钮，无需额外 CSS。若使用旧版本或自定义 UA 样式，可忽略此部分；现代项目中基本无需针对 Firefox 特别处理。
保持可用性与无障碍支持
隐藏箭头后，用户仍可通过以下方式操作数值：
立即学习“前端免费学习笔记（深入）”；
- 直接输入数字（支持小数、负号等，符合
step、min、max约束） - 按上下方向键增减（步长为
step值，默认为 1） - 鼠标滚轮滚动（Chrome/Edge 默认启用，Safari 需开启设置或通过 JS 启用）
- 屏幕阅读器仍能正确识别
type="number"语义，不影响无障碍访问
注意：不要用 input[type="text"] 替代并手动校验数字——会丢失原生验证、移动端数字键盘触发、语义化等优势。
兼容性与注意事项
该方案在 Chrome 12+、Edge 12+、Safari 3.1+、Opera 15+ 中稳定生效。需留意：
-
appearance: none是关键，仅设display: none可能不生效 - 避免对整个
input设overflow: hidden，可能裁剪内容 - 若使用 CSS 框架（如 Bootstrap），检查是否已有重置规则冲突，建议将上述样式放在自定义 CSS 中并提高优先级
