elementui中input限制为仅输入数字时，去除右侧按钮，以及输入文字时光标仍然居中

EstherNi

已于 2024-01-25 15:25:19 修改

阅读量680

点赞数 9

文章标签： elementui 前端 javascript

于 2024-01-25 15:23:45 首次发布

本文链接：https://blog.csdn.net/estherni/article/details/135845622

版权

本文介绍了如何使用SCSS语言对HTML中的数字输入框进行样式调整，去除默认的箭头外观，实现更符合内容社区设计规范的文本式输入体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<el-input placeholder="点击输入" type="number" class="topbut botbut" v-model="scope.row.farmArea"></el-input>

<style lang="scss">
.topbut {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
    line-height: 1;//输入文字的话，光标居中
  }
  inpit {
    border: none;
  }
}
</style>