如何修复CSS number输入框箭头的兼容性问题

Chrome/Edge需同时设-webkit-appearance:none、display:none、margin:0并补padding-right；Firefox必须用-moz-appearance:textfield；所有方案不影响键盘/滚轮增减功能。

Chrome 和 Edge 里箭头去不干净？先清伪元素再重置外观

只写 display: none 给 ::-webkit-inner-spin-button，在部分 Chrome 版本（尤其是 v110+）里会留白、光标右偏或右侧 padding 塌陷。根本原因是伪元素被隐藏但布局占位仍在。

1. 必须同时设置 -webkit-appearance: none + display: none + margin: 0
2. ::-webkit-outer-spin-button 也要一并处理，旧版 Edge 和某些 macOS Safari 仍依赖它
3. 清除后输入框默认 padding-right 会变小（原生 spinner 占约 20px），需显式补回，比如 padding-right: 12px

Firefox 箭头还在？-moz-appearance: textfield 是关键

仅靠 WebKit 规则对 Firefox 完全无效。Firefox 从 v96 起默认显示 spinner，且 appearance: none 不生效——它只认 -moz-appearance: textfield，这是唯一可靠方式。

1. input[type="number"] { -moz-appearance: textfield; } 必须单独写，不能合并进 WebKit 规则块
2. 别用 -moz-appearance: none，它在 Firefox 中会导致边框圆角丢失、高度异常
3. 如果用了自定义 border 或 box-shadow，建议加 box-sizing: border-box 防止尺寸错乱

全局样式 vs 局部覆盖：什么时候该用 scoped？

在 Vue + Element-UI 项目中，直接往 App.vue 的 <style> 里塞全局规则最省事，但容易误伤第三方组件里的 type="number" 输入框（比如某些弹窗插件内部的计数器）。

1. 推荐优先用 scoped 方式：<style scoped> 内写 .my-form input[type="number"] { ... }
2. Element-UI 的 el-input 渲染后会透出原生 <input>，所以选择器要匹配到它，例如：.my-form .el-input input[type="number"]
3. 若用 CSS Modules 或 Tailwind，务必确保规则能穿透到内部 <input>，否则无效

隐藏箭头后功能还正常吗？别误关滚轮和键盘增减

所有 CSS 方案都只影响 UI 渲染，不影响原生行为。↑/↓ 键、Page Up/Page Down、鼠标滚轮依然能调数值——这是浏览器内置逻辑，和箭头显隐无关。

1. 如需禁用滚轮，必须用 JS：input.addEventListener('wheel', e => e.preventDefault())
2. 注意：该监听需在 input 元素挂载后执行，Vue 中建议放在 mounted 或 onMounted 里
3. 别用 type="text" + 正则替代，会丢掉移动端数字键盘、无障碍语义（role="spinbutton"）、以及表单提交时的类型校验

实际落地时最容易漏的是 margin: 0 和 padding-right 补偿——看起来箭头没了，但用户输入时文字贴着右边跑，这种细节上线后才被 QA 抓到，改起来反而更被动。