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

最新推荐文章于 2024-05-09 10:19:43 发布

武当王也拜见老天师

最新推荐文章于 2024-05-09 10:19:43 发布

阅读量1.6k

点赞数 1

分类专栏： vue css 文章标签： vue elementui

本文链接：https://blog.csdn.net/Oct_Somnus/article/details/132596351

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

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