仅靠css隐藏伪元素无法禁用增减行为，必须同时拦截wheel和keydown事件；chrome/edge需设::-webkit-inner-spin-button、::-webkit-outer-spin-button为none并加margin:0；firefox须用-moz-appearance:textfield；safari存在兼容限制，建议备选type="tel"+正则校验。
仅靠 CSS 隐藏伪元素，无法真正禁用增减行为；必须同时拦截 wheel 和键盘事件，否则用户仍能通过滚轮或 ↑/↓ 键修改值。
Chrome/Edge 等 WebKit/Blink 浏览器怎么彻底隐藏箭头
它们用两个伪元素渲染箭头：::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button。只设 -webkit-appearance: none 不够，某些版本会残留空白占位：
-
margin: 0必须显式写，否则右侧留白 - 建议加
display: none而非仅依赖appearance - 避免滥用
!important；用更具体的选择器（如input.number-input）更可控
Firefox 怎么同步处理箭头显示
Firefox 完全不识别 WebKit 伪元素，必须用 -moz-appearance: textfield 把数字输入框“降级”为普通文本框：
- 务必带上属性选择器：
input[type="number"] { -moz-appearance: textfield; } - 若用 Vue 封装组件（如
<el-input type="number"></el-input>），需用::v-deep（Vue 2）或:deep()（Vue 3）穿透样式 - 该声明本身不触发重排，但会影响默认 padding 行为，后续需手动补全
为什么隐藏后输入框变窄或光标偏左
这是 -webkit-appearance: none 的副作用——浏览器移除 spin button 后，会丢弃其内置的 padding、box-sizing 和 text-align 默认值：
- 必须显式设置
padding（如6px 12px），不能依赖浏览器默认 - 统一加
box-sizing: border-box，防止宽度计算异常 - 建议加
text-align: left，避免 Safari 下光标错位
怎么禁用滚轮和方向键增减行为
CSS 只管 UI，行为得靠 JS 拦截。最稳妥的方式是监听 wheel 和 keydown，并阻止默认动作：
- 给
input[type="number"]绑定onwheel="return false"可快速禁用滚轮（兼容所有现代浏览器） - 对方向键需监听
keydown，判断e.key === "ArrowUp" || e.key === "ArrowDown"后调用e.preventDefault() - 注意：不要用
input或change事件拦截，它们发生在值已变更之后
真正难处理的是 Safari —— 它既不支持 ::-webkit-*spin-button 的完全隐藏（部分版本仍渲染不可见占位），也不响应 -moz-appearance；此时要么接受轻微视觉差异，要么改用 type="tel" + 正则校验兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
