如何使用CSS移除number输入框的上下递增递减按钮

适用场景 #

开发金额录入功能时，给number类型输入框添加自定义货币符号等自定义内容后，输入框原生的上下增减箭头会和自定义内容产生布局显示冲突，冲突效果参考：

实现代码 #

添加以下CSS规则即可完全移除原生箭头，兼容所有主流浏览器：

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

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

使用说明 #

• 上述样式仅隐藏原生箭头UI，不会改变输入框的数字类型属性：移动端仍会默认唤起数字键盘，表单原生数字校验逻辑不受影响
• 键盘上下键调整数值、鼠标滚轮调整数值的默认交互不会被该样式屏蔽
• 若仅需要对特定输入框（如带货币符号的金额输入框）生效，将选择器替换为对应输入框的类/ID选择器即可，例：给金额输入框添加类名.amount-input，将上述代码中input[type="number"]替换为.amount-input即可精准生效

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