【VUE】 input输入框设置type=number时，去掉后面的上下按钮

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

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

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

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

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

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

------其中aaa均为你的代码中对应的class值

【引用样式类】

<el-input

type="number"

class="aaa,bbb"

...

/>

【拓展】禁止input['number']的上下按键后，通常还需要，禁用滚轮事件；

盖上遮罩之后不需要下面内容支持滚动
@mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件

<div @mousewheel.prevent>

        <el-input

        type="number"

        class="aaa,bbb"

        ...

        />
</div>

最后

以上就是激情鲜花为你收集整理的【VUE】 input输入框设置type=number时，去掉后面的上下按钮的全部内容，希望文章能够帮你解决【VUE】 input输入框设置type=number时，去掉后面的上下按钮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。