＜el-input type=number＞右侧加减箭头隐藏

最新推荐文章于 2024-12-10 08:08:48 发布

原创最新推荐文章于 2024-12-10 08:08:48 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了如何通过CSS样式，特别是使用Scss，去除ElementUI中的Number输入框自带的加减1箭头，实现更简洁的数字输入体验。

<el-input type="number" v-model.number="form.num" 
          placeholder="请输入正规数字" />

正常使用el-input type=number，右侧会有加减1的箭头，点击会影响我们输入的小数。所以想办法把箭头去掉。

通过css来解决问题。

<el-input type="number" v-model.number="form.num" 
          class="editNum"placeholder="请输入正规数字" />

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