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 塌陷。根本原因是伪元素被隐藏但布局占位仍在。
- 必须同时设置
-webkit-appearance: none+display: none+margin: 0 -
::-webkit-outer-spin-button也要一并处理，旧版 Edge 和某些 macOS Safari 仍依赖它 - 清除后输入框默认
padding-right会变小（原生 spinner 占约 20px），需显式补回，比如padding-right: 12px
Firefox 箭头还在？-moz-appearance: textfield 是关键
仅靠 WebKit 规则对 Firefox 完全无效。Firefox 从 v96 起默认显示 spinner，且 appearance: none 不生效——它只认 -moz-appearance: textfield，这是唯一可靠方式。
-
input[type="number"] { -moz-appearance: textfield; }必须单独写，不能合并进 WebKit 规则块 - 别用
-moz-appearance: none，它在 Firefox 中会导致边框圆角丢失、高度异常 - 如果用了自定义 border 或 box-shadow，建议加
box-sizing: border-box防止尺寸错乱
全局样式 vs 局部覆盖：什么时候该用 scoped？
在 Vue + Element-UI 项目中，直接往 App.vue 的 <style> 里塞全局规则最省事，但容易误伤第三方组件里的 type="number" 输入框（比如某些弹窗插件内部的计数器）。
- 推荐优先用 scoped 方式：
<style scoped>内写.my-form input[type="number"] { ... } - Element-UI 的
el-input渲染后会透出原生<input>，所以选择器要匹配到它，例如：.my-form .el-input input[type="number"] - 若用 CSS Modules 或 Tailwind，务必确保规则能穿透到内部
<input>，否则无效
隐藏箭头后功能还正常吗？别误关滚轮和键盘增减
所有 CSS 方案都只影响 UI 渲染，不影响原生行为。↑/↓ 键、Page Up/Page Down、鼠标滚轮依然能调数值——这是浏览器内置逻辑，和箭头显隐无关。
立即学习“前端免费学习笔记（深入）”；
- 如需禁用滚轮，必须用 JS：
input.addEventListener('wheel', e => e.preventDefault()) - 注意：该监听需在 input 元素挂载后执行，Vue 中建议放在
mounted或onMounted里 - 别用
type="text"+ 正则替代，会丢掉移动端数字键盘、无障碍语义（role="spinbutton"）、以及表单提交时的类型校验
margin: 0 和 padding-right 补偿——看起来箭头没了，但用户输入时文字贴着右边跑，这种细节上线后才被 QA 抓到，改起来反而更被动。 
