最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


(资料图片)

在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元素改成如下即可。

关键词： 上下箭头 发生变化 鼠标滚轮