我是靠谱客的博主 激情鲜花,这篇文章主要介绍【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】内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(85)

评论列表共有 0 条评论

立即
投稿
返回
顶部