移动端隐藏数字输入框箭头的::-webkit-inner-spin-button仅在webkit/blink浏览器生效，但ios safari默认不渲染该伪元素，故css无效；可靠方案是appearance: textfield配合-moz-appearance及inputmode="numeric"。
移动端隐藏数字输入框的上下箭头（::-webkit-inner-spin-button）
这个伪元素只在基于 WebKit/Blink 的浏览器中生效（Chrome、Edge、Safari iOS/macOS），用于控制 <input type="number"> 内置的增减按钮。但要注意：它在绝大多数移动端浏览器（包括 iOS Safari）上**默认不显示箭头**，所以加这段 CSS 往往是“无效但无害”的——除非你正在调试桌面端或某些定制 Android WebView。
- 真正需要隐藏时，必须配合
appearance: none和margin: 0，否则 Safari 可能仍保留不可见占位 - 仅对
type="number"生效，对type="text"或自定义 spinner 组件无效 - Android Chrome 115+ 已开始移除该伪元素支持，依赖它做样式控制风险升高
::-webkit-inner-spin-button 不生效的常见原因
写完 CSS 却没效果？大概率是以下某个环节断了：
- 没给
input[type="number"]设置appearance: none—— 这是前提，否则伪元素被原生控件样式覆盖 - 父容器或全局重置样式里有
* { appearance: auto }，强行恢复了默认外观 - 用了
!important但层级不够，比如被input::-webkit-inner-spin-button的更具体选择器覆盖 - 目标设备根本没渲染这个伪元素（如 iOS Safari、Firefox Android），查
getComputedStyle返回""就说明不支持
更可靠的跨平台隐藏方案
如果目标是让数字输入框在所有移动端看起来“干净”，别只押注 ::-webkit-inner-spin-button：
- 用
input[type="number"] { appearance: textfield; }强制退化为文本框样式（兼容性比伪元素好） - 添加
-moz-appearance: textfield覆盖 Firefox - 对 iOS Safari，额外加
direction: ltr防止因 RTL 布局导致内部按钮错位残留 - 若需完全自定义交互，建议改用
input[type="text"]+ JS 校验和按键拦截，避开原生控件限制
为什么 iOS Safari 上加了也没用
iOS Safari 的 input[type="number"] 根本不渲染 ::-webkit-inner-spin-button —— 它直接调用系统数字键盘，UI 完全由系统控制。你看到的“没有箭头”，不是被隐藏了，而是压根不存在这个 DOM 结构。这时候写 CSS 就像给空气刷颜色。
真正要干预的是键盘类型（用 inputmode="numeric"）和输入验证（pattern="[0-9]*"），而不是试图修改一个不存在的伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
