解决elementui input输入框为 Number 类型-取消上下箭头样式

690 阅读1分钟

遇到的问题:

elementui input输入框使用Number类型的时候,会有上下箭头(不好看),并且滚轮可以滑动(正常页面就是滚轮滑的,不能一键多用),禁用这两个

image.png

注意:vue3中 ::v-deep 组合器用法已经废弃,要使用 :deep(<inner-selector>) 语法来代替。

解决的方法(vue3):

<style scoped> 
      ::v-deep(.el-input input::-webkit-outer-spin-button),
      ::v-deep(.el-input input::-webkit-inner-spin-button) {
        -webkit-appearance: none !important;
      }

      ::v-deep(.el-input input[type="number"]) {
        -moz-appearance: textfield;
      }

      ::v-deep(.el-input .el-input__inner) {
        line-height: 1px !important;
      }
</style>

解决的方法(vue2):

<style scoped> 
    ::v-deep.el-input input::-webkit-outer-spin-button,
    ::v-deep.el-input input::-webkit-inner-spin-button {
        -webkit-appearance: none!important;
    }
    ::v-deep.el-input input[type="number"]{
        -moz-appearance: textfield;
    }
    ::v-deep.el-input .el-input__inner {
        line-height: 1px!important;
    }
</style>