必须同时使用各浏览器私有前缀和伪元素重置才能彻底隐藏number输入框的上下箭头：chrome需-webkit-appearance:none+::-webkit-inner/outer-spin-button{display:none}，firefox需-moz-appearance:textfield，safari仅需appearance:none；清除后键盘上下键仍可增减数值，不影响无障碍访问。
Chrome/Firefox里的上下箭头怎么统一去掉
直接用 appearance: none 不够，必须配合各浏览器私有前缀和额外重置。Chrome 默认显示 spinner，Firefox 从 v96+ 开始也默认显示（之前是隐藏的），Safari 则始终不显示——这导致样式行为不一致。
关键不是“能不能去掉”，而是“去掉后会不会破坏可访问性或触发意外交互”。比如仅用 appearance: none 在 Chrome 中可能让箭头消失但保留占位空间，焦点时仍可键盘上下键调整值。
- 必须同时写
-webkit-appearance: none和-moz-appearance: textfield（Firefox 需设为textfield才真正移除控件逻辑） - Chrome 还要额外加
::-webkit-inner-spin-button和::-webkit-outer-spin-button并设display: none - 别漏掉
padding-right调整——原生 spinner 占宽约 20px，清掉后若不补内边距，文字会贴右边缘
为什么appearance: none单独写无效
因为 appearance 是 CSS Level 4 规范中的实验性属性，目前只有 Firefox 支持无前缀的 appearance: none，而 Chrome/Safari 仍只认 -webkit-appearance，且它的取值范围有限：Chrome 不接受 none 作为 input[type="number"] 的合法值，会回退到默认渲染。
更麻烦的是，-webkit-appearance: none 在 Chrome 中对 number 输入框实际效果是“视觉隐藏但逻辑仍在”，所以必须叠加伪元素清除。
-
-webkit-appearance: none只影响外层容器，不影响内部 spinner 元素 -
::-webkit-inner-spin-button控制输入框内的上下按钮 -
::-webkit-outer-spin-button在某些旧版 Chrome 中控制外层包裹（虽常为空，但建议一并设display: none）
清除后还能用键盘上下键增减数值吗
能。清除 spinner 只是移除 UI 元素，不干预原生 number 输入框的行为逻辑。用户依然可以用 ↑/↓ 键调整数值，Page Up/Page Down 以步长 10 增减——这是浏览器内置能力，与 appearance 无关。
如果你希望禁用该行为，得靠 JS 拦截 keydown 事件，但一般不推荐：它违反了用户对 type="number" 的预期，也影响屏幕阅读器辅助操作。
- 仅清除 UI 不影响
step、min、max等属性生效 - 无障碍测试中，ARIA 属性（如
aria-valuetext）仍需手动维护，因为视觉控件没了，但语义没变 - 移动端 iOS Safari 虽不显示 spinner，但软键盘仍是数字键盘——这点不受 CSS 影响
完整可用的清除代码片段
input[type="number"] {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
padding-right: 12px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
display: none;
}
注意：padding-right 值按实际字体和设计微调，12px 是常见起始值；appearance: none 放最后，确保在前缀之后被现代浏览器识别；不要给 input[type="number"] 设 text-align: right 后再清 spinner，否则光标定位可能错乱。
最易忽略的是 Firefox 的 -moz-appearance: textfield —— 没这句，v96+ 以后的 Firefox 仍会渲染出类似 spinner 的窄竖条，尤其在 focus 状态下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
