最通用、副作用最小的方案是用css隐藏::-webkit-inner-spin-button和-moz-appearance:textfield：chrome/edge/safari需重置::-webkit-inner-spin-button与::-webkit-outer-spin-button并设margin:0，firefox必须用-moz-appearance:textfield。
直接用 CSS 隐藏 ::-webkit-inner-spin-button 和 ::-moz-appearance
这是最通用、副作用最小的方案，不改变 type="number" 的语义和功能，只去掉视觉干扰。关键在于覆盖不同内核浏览器的原生控件样式：
- Chrome / Edge / Safari（WebKit/Blink）：必须同时重置
::-webkit-inner-spin-button和::-webkit-outer-spin-button，仅设appearance: none不够，还要加margin: 0防止残留空白 - Firefox：
-moz-appearance: textfield是唯一可靠方式，appearance: none在旧版 Firefox 中无效 - 不要只写全局
input[type="number"]，Element-UI 等组件会把样式透传到内部<input>，所以选择器得穿透一层，比如.el-input input[type="number"]或加!important（仅当 scoped style 下失效时）
type="tel" 替代 type="number" 的适用边界
移动端调出数字键盘、无加减箭头、无需额外样式——看似完美，但有硬伤：
- 失去原生
min/max/step校验，表单提交前不会自动报错；checkValidity()返回true即使输入了字母 - JS 读取
value得到的是字符串，需手动parseInt或parseFloat，且无法依赖valueAsNumber - 部分安卓键盘在
type="tel"下仍会显示符号键（如 * #），不如type="number"干净 - 仅推荐用于「用户只输整数、且后端/JS 全权负责校验」的场景，比如商品数量输入
为什么不能用 display: none 隐藏加减按钮
加减按钮不是独立 DOM 元素，而是浏览器渲染层的伪控件，无法用常规 CSS 选择器选中并隐藏。试图写 .stepper__increase { display: none; } 这类规则完全无效——因为根本不存在这个 class 对应的真实节点。
- 你看到的箭头是
<input>自带的 UI 行为，不是可操作的子元素 - 想“删掉它”，只能通过
appearance或moz-appearance重置渲染逻辑，而非 DOM 操作 - 误以为它是 button 而去绑定事件或设置
disabled，会导致 JS 逻辑错乱（比如监听不到点击）
Element-UI 中 el-input 的特殊处理点
封装层会让样式穿透变复杂，尤其在 <el-input type="number"></el-input> 场景下：
- 默认情况下，
el-input内部的<input>没有 class，纯靠标签选择器定位，所以input[type="number"]规则能生效，但容易被更高优先级样式覆盖 - 若用了
prefix-icon或suffix-icon，右侧图标区域可能和原生箭头重叠，此时光隐藏箭头还不够，得同步调整padding-right避免文字被遮挡 - 在 Vue 3 + Composition API 项目中，scoped style 默认不作用于子组件内部节点，必须用
:deep(input[type="number"])（或::v-deep兼容写法）才能生效
实际中最容易被忽略的是 Firefox 的兼容处理——很多团队只测 Chrome，上线后发现火狐仍有旋转器，临时补 -moz-appearance: textfield 又因没加 !important 被其他样式覆盖，导致反复调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
