Chrome/Firefox 中 input[type="number"] 的箭头需分别用::-webkit-inner-spin-button 和 appearance: none 隐藏，Safari 不支持隐藏；隐藏后键盘上下键仍可增减数值。
Chrome/Firefox 中 input[type="number"] 的箭头怎么关掉
默认情况下，input[type="number"] 在 Chrome、Edge 和 Firefox 会显示上下微调箭头（spin buttons），但它们的隐藏方式不统一，不能只写一套 CSS 就完事。
关键点在于：Chrome/Edge 用伪元素 ::-webkit-inner-spin-button 控制，Firefox 从 v95+ 开始支持 appearance: none，而 Safari 目前仍不支持隐藏（会忽略相关样式）。
- 必须同时处理
::-webkit-inner-spin-button和appearance -
appearance: none对 Firefox 有效，但对 Chrome 无效；反过来，::-webkit-inner-spin-button只在 WebKit/Blink 内核生效 - 别漏掉
margin-right: -24px这类补偿——隐藏后原位置可能留白或挤占输入空间
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
type="number" 隐藏箭头后，还能用键盘上下键增减吗
能。隐藏箭头只是移除 UI 元素，不影响原生行为逻辑。用户依然可以用 ↑/↓ 键增减数值，Page Up/Page Down 也照常工作。
但要注意：如果同时加了 step="any" 或 step="0.1"，键盘增减步长会按该值变化；没设 step 时默认为 1。
立即学习“前端免费学习笔记（深入）”；
- 禁用键盘增减？得靠 JS 拦截
keydown事件，纯 CSS 做不到 - 某些旧版 Android WebView 里，
appearance: none可能导致上下键失效，需实测 - 如果业务上真不需要增减逻辑，不如直接改用
input[type="text"]+ 输入限制（如pattern或 JS 校验）
用 inputmode="numeric" 替代 type="number" 行不行
不行——inputmode 只影响软键盘弹出类型，和是否带箭头完全无关。它既不会触发数字校验，也不会渲染微调控件。
常见误用场景：想在移动端调起数字键盘，又怕 PC 端出现箭头。这时候正确做法是保留 type="number"，再用上面的 CSS 隐藏箭头；inputmode="numeric" 可以额外加上，作为增强体验的补充。
-
inputmode="numeric"在 iOS Safari 上支持良好，Android 各厂商支持度不一 - 单独用
inputmode而不用type="number"，会丢失表单验证（如required、min/max）、无障碍语义（AT 读作“数字输入”） - 如果只想要纯文本输入 + 数字软键盘，
input[type="text"] inputmode="numeric"是更干净的选择
Safari 上为什么死活藏不掉箭头
因为 Safari（截至 iOS 17 / macOS Sonoma）根本不支持隐藏 input[type="number"] 的微调按钮。所有针对 ::-webkit-inner-spin-button 的样式都会被忽略，appearance 也不生效。
这不是写法问题，是 Apple 明确未实现该功能。开发者只能接受现状，或换方案。
- 没有 hack 可绕过；
transform: scale(0)或opacity: 0会让按钮不可见但还占位，且焦点仍在其上，操作异常 - 若产品必须统一外观，建议全平台降级为
input[type="text"]+ JS 拦截非数字输入 + 手动绑定增减逻辑 - 留意 Safari 对
step的解析差异：设step="0.1"时，部分版本会四舍五入到小数点后一位，但显示值可能滞后
