如图所示

在这里插入图片描述

话不多说,解决方法

当 input type=‘number’ 时,去掉后面的上下按钮
在style里面添加此段代码即可

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

BUT 在现在项目中,使用的是vue+element,通常写当前页面的样式时使用scoped,但是这样会发现上面的代码失效,此时需要使用/deep/

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

在scss中

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

希望能帮到你!

Logo

前往低代码交流专区

更多推荐