input中type="number"类型去除上下箭头和禁止滚轮滚动改变数值

背景：

在vue做后台管理系统项目中，会有一些表单需要验证，比如只能输入数字。有一种解决方法就是使用type="number"。由此也遇到了下面两个问题：

1. 去除上下箭头

写上type="number"后输入框右边会有上下箭头，影响视觉体验。可以使用下面方法去除：

<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
   
   
    -webkit-appearance: none;
  }

  input[type="number"] {
   
   
    -moz-appearance: textfield;
  }
</style>

注意：在使用element-UI的vue项目中重写el_input样式要在全局中写，在scoped重谢这些样