elementUI组件库改造【1】-<el-input type=number> 右侧加减箭头隐藏

elementUI组件库改造【1】-<el-input type=number> 右侧加减箭头隐藏_第1张图片

问题原因

正常使用el-input type=number,右侧会有加减1的箭头,这是input输入框原生标签自带的。

带来的影响

1、点击会影响我们输入的小数。

2、看上去不美观,ui走查不通过等等

解决方法:通过css来把箭头去掉

代码如下:

input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      input[type="number"] {
        -moz-appearance: textfield;
      }

也可以给该输入框添加统一类名如:custom-numIpt等,样式放到全局统一处理。

你可能感兴趣的:(elementui,前端,javascript,vue.js,ecmascript,css3,css)