VUE+ElementUI 使用el-input类型type=“number” 时,取消右边的上下箭头

项目场景:

提示:这里简述项目相关背景:

在项目中有时候需要输入框的type="number",这个时候,输入框的右边就会出现两个按钮,这两个按钮可以递增/递减,但是这样输入框看上去就不太美观,就需要将其隐藏


解决方案:

提示:这里填写该问题的具体解决方案:

局部

css 复制代码
<style scoped> 
  // ===========================================使用::v-deep()
  // 使用el-input类型type="number" 时,取消右边的上下箭头
  ::v-deep(input::-webkit-outer-spin-button),
  ::v-deep(input::-webkit-inner-spin-button) {
     -webkit-appearance: none;
  }
  ::v-deep(input[type="number"]) {
    -moz-appearance: textfield;
  }
  ::v-deep(inpit) {
    border: none
  }
  // ===========================================使用/deep/
  /deep/ input::-webkit-outer-spin-button,
  /deep/ input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  /deep/ input[type="number"] {
      -moz-appearance: textfield;
  }
  /deep/ inpit {
      border: none
  }
</style>

全局

css 复制代码
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  input[type="number"] {
      -moz-appearance: textfield;
  }
  inpit {
      border: none
  }

结果示例图

相关推荐
小高0072 分钟前
告别“if-else”条件判断:5 个让 JavaScript 逻辑更优雅的写法
前端·javascript
二闹11 分钟前
前端安全:你还在忽视这3个致命 XSS 漏洞?
前端
前端的日常14 分钟前
面试必备:前端路由 route 和 router 的核心要点
前端
icr19 分钟前
React Fiber和React:diff 算法
前端
_未完待续21 分钟前
框架实战指南-错误处理
前端·vue.js
xianxin_23 分钟前
HTML 锚点
前端
Sean_summer28 分钟前
暑期第二周
前端·数据库·python
_未完待续33 分钟前
框架实战指南-组件参考
前端·vue.js
李文旺34 分钟前
图片加载优化-Nextjs与webpack源码
前端·react.js
不想当小卡拉米34 分钟前
高德地图上marker过多(超过3000个)渲染卡顿过慢问题解决
前端