首页 > 其他分享 >去掉Element 中el-input type=number时尾部上下箭头、禁用鼠标滚动

去掉Element 中el-input type=number时尾部上下箭头、禁用鼠标滚动

时间:2023-02-14 10:55:17浏览次数:45  
标签:el 箭头 appearance number Element 输入框 important input textfield

在Element中,如果我们的输入框中需要输入数字时,将el-input的类型设置为number,这时输入框的尾部会出现上下箭头,影响美观性,这时只需在页面中加入如下样式,就可以去掉输入框尾部的上下箭头。

/* element样式重置 start */
/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  appearance: none !important;
  margin: 0;
}
input[type="number"]{
  -webkit-appearance:textfield;
  -moz-appearance:textfield;
  -o-appearance:textfield;
  -ms-appearance:textfield;
  appearance:textfield;
}
/* 去掉input尾部上下小箭头 end */

虽然输入框尾部的上下箭头去掉了,但是,当我们鼠标焦点在输入框中时,上下滚动鼠标滚轮,这时输入框中的数字会发生变化,容易导致误操作,这时只需要将el-input元素改成如下即可。

<el-input type="number" v-model.number="numberData" @mousewheel.native.prevent></el-input>

标签:el,箭头,appearance,number,Element,输入框,important,input,textfield
From: https://www.cnblogs.com/shang53880/p/17118891.html

相关文章