如何移除type=number输入框的内置增减按钮及行为（不改输入类型）

要同时搞定隐藏内置增减按钮和禁用增减行为，只靠appearance-none不够，得结合CSS和JS来处理：

一、CSS隐藏增减按钮 #

不同浏览器的内置按钮对应不同的伪元素，需要针对性设置样式：

/* Chrome、Safari、Edge等webkit内核浏览器 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox浏览器 */
input[type="number"] {
  -moz-appearance: textfield;
}

这段代码能彻底隐藏各浏览器下的内置增减按钮，比单纯用appearance-none更可靠。

二、JS禁用增减行为 #

就算按钮隐藏了，用户还能通过鼠标滚轮或键盘上下箭头修改数值，得用JS阻止这些默认行为：

// 选中所有type为number的input元素
const numberInputs = document.querySelectorAll('input[type="number"]');

numberInputs.forEach(input => {
  // 阻止滚轮事件触发数值变化
  input.addEventListener('wheel', function(e) {
    e.preventDefault();
  });

  // 阻止上下箭头按键触发数值变化
  input.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      e.preventDefault();
    }
  });
});

如果是用框架（比如Vue、React），可以把事件绑定逻辑放到对应的生命周期或钩子函数里，效果是一样的。

这样操作后，input[type="number"]既看不到增减按钮，也没法通过滚轮、箭头键修改数值，完全保留number类型的其他特性（比如表单验证、移动端数字键盘）。

内容的提问来源于stack exchange，提问作者Qaisar