当 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>

Logo

前往低代码交流专区

更多推荐