去掉input type="number"上下箭头需用CSS：Chrome/Edge用::-webkit-inner-spin-button和::-webkit-outer-spin-button隐藏，Firefox用-moz-appearance:textfield和appearance:textfield回退样式，缺一不可。
input type="number" 怎么去掉上下箭头
Chrome、Edge 和 Safari 默认给 <input type="number"> 加了微调按钮（spin buttons），但多数表单其实不需要它，还容易误触。去掉的关键不是 JS 控制，而是用 CSS 隐藏原生控件。
不同浏览器的伪元素名不一样，必须同时覆盖：
- Chrome/Edge：
::-webkit-inner-spin-button和::-webkit-outer-spin-button - Firefox：
appearance: none（需配合-moz-appearance）
完整写法示例：
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
为什么只写 appearance: none 不够
单独写 appearance: none 在 Chrome 下无效——它只影响 Firefox；而 Chrome 必须用 ::-webkit-* 伪元素显式隐藏。漏掉任一规则，箭头仍会残留。
立即学习“前端免费学习笔记（深入）”；
另外注意：-moz-appearance: textfield 是为了让 Firefox 回退到普通文本框样式，否则可能显示灰色禁用态或异常边框。
- 不加
-moz-appearance: textfield→ Firefox 中输入框可能变矮、文字偏上 - 漏掉
margin: 0→ WebKit 下按钮虽不可见，但占位还在，导致右侧内边距异常
移动端 Safari 有例外情况
iOS Safari 的数字键盘无法禁用，但微调按钮本身在非聚焦状态下不显示；一旦聚焦，顶部工具栏会出现「完成」和数字键，这是系统行为，CSS 无法干预。
所以真正要处理的只有桌面端 Chrome/Edge/Firefox。如果你发现 iPad 上仍有小箭头，大概率是用了旧版 iOS（15.4 之前）或未触发 viewport 缩放修复，可加这行保底：
input[type="number"] {
-webkit-text-security: none;
}
替代方案：用 type="text" + 输入限制
如果项目需要彻底规避兼容性问题，更稳妥的做法是改用 type="text"，再用 JS 或 HTML5 属性约束输入：
- 加
inputmode="numeric"呼出数字键盘（移动端友好） - 用
pattern="[0-9]*"配合oninput过滤非数字字符 - 保留
min/max属性做逻辑校验，但不依赖浏览器 UI
这样既没箭头，又避免了 CSS hack 维护成本，尤其适合表单字段多、需统一控制的场景。
微调按钮看似小事，但跨浏览器隐藏时，伪元素名、回退样式、移动端差异这三处最容易漏掉——少一个，就可能在某个环境里突然冒出来。
