vue-elementUI去掉input上下箭头

一、问题描述

vue中使用elementUI,在使用input输入框,设置type为number数字类型是,会出现如下上下箭头问题;如下所示:

二、问题解决

出现这个问题,只需要重置下elementUI的input样式即可解决,如下:

 /* 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 */

你可能感兴趣的