隐藏数字输入框上下箭头需同时处理webkit/blink和firefox：chrome/edge/safari用::-webkit-inner-spin-button和::-webkit-outer-spin-button加-webkit-appearance:none；firefox必须加-moz-appearance:textfield，且均需设margin:0避免留白。
Chrome/Firefox里数字输入框的上下箭头怎么隐藏
直接加 ::-webkit-inner-spin-button 伪元素并设 display: none 就行，但只对 WebKit/Blink 内核生效（Chrome、Edge、Safari），Firefox 需额外处理。
- Firefox 不识别
::-webkit-inner-spin-button，得用appearance: none+padding-right配合隐藏（否则右侧留白） - 加了
display: none后，部分旧版 Chrome 可能导致输入框高度微变，建议同步重置height或用line-height对齐 - 别只写
::-webkit-inner-spin-button，漏掉::-webkit-outer-spin-button会导致 Safari 下仍有残留边框
完整兼容写法长什么样
以下 CSS 能覆盖 Chrome、Edge、Safari、Firefox，且不破坏可访问性（仍支持键盘上下键增减）：
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-
-moz-appearance: textfield是 Firefox 的关键，它把原生数字控件退化为普通文本框，从而移除箭头 -
-webkit-appearance: none比display: none更稳妥，避免某些版本中伪元素未渲染却占位的问题 - 必须写
margin: 0，否则 Chrome 下箭头虽不可见，但默认margin仍会撑开右侧空间
为什么不能只靠 JavaScript 禁用箭头
JS 无法真正“删除”微调按钮，只能监听 keydown 拦截上下键——但这和隐藏 UI 元素是两回事，用户依然能看到箭头、能鼠标点击、在高对比模式下可能更显眼。
- 拦截
ArrowUp/ArrowDown会破坏屏幕阅读器对input[type="number"]的语义识别 - 移动端（尤其是 iOS Safari）的数字键盘唤起逻辑依赖原生类型，强行 JS 干预容易导致软键盘异常或失去数字键盘
- 如果只是想禁用增减功能，改用
input[type="text"]+ 正则限制更干净，别硬留type="number"又塞 JS
隐藏后还要注意什么
视觉上箭头没了，但行为逻辑没变：用户仍可通过鼠标滚轮、键盘上下键、粘贴非法值触发校验，validity.badInput 和 invalid 事件照常工作。
- 别忘了测试粘贴场景——比如粘贴 "12.5a"，浏览器会静默截断还是报错，取决于是否设了
step或min/max - 如果项目需支持 IE，
input[type="number"]本就不被识别，上述 CSS 完全无效，得降级为type="text"+ 自行校验 - 设计稿若要求“仅允许整数”，除了 UI 隐藏箭头，还得设
step="1"和oninput截断小数，否则用户仍可输入 3.14
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
