vue+element-ui input输入框设置属性type为number去除右边的上下按键

当 input type=number 时，去掉后面的上下按钮

<el-input type="number" clearable />

1.全局样式改变：

//在style里面添加此段代码即可

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

2.在style中使用的是vue+element，通常写当前页面的样式时使用scoped，防止篡改其他页面样式，但是这样会发现上面的代码失效，此时需要使用/deep/去寻找

【定义样式】去除表框、去除上下箭头、去除滚轮事件

<el-input v-model="" type="number" class="topbut botbut" clearable />

<style scoped lang="scss">
/deep/  .topbut input::-webkit-outer-spin-button,
/deep/  .topbut input::-webkit-inner-spin-button {
        -webkit-appearance: none;
}
    /deep/  .topbut input[type="number"]{
        -moz-appearance: textfield;
    }

  /deep/  .botbut inpit{
        border: none
    }
</style>

3.在style样式没有加入scoped，<style lang="scss">

<el-input v-model="" type="number" class="topbut botbut" clearable />

<style>
.topbut input::-webkit-outer-spin-button,
.topbut input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.topbut input[type="number"]{
    -moz-appearance: textfield;
}
.botbut inpit{
    border: none
}
</style>

文章来源地址https://uudwc.com/A/0rM1w