vue+element-ui input输入框设置属性type为number去除右边的上下按键

7月前作者：YangHuan3 分类：Toy博客阅读(37) 违法举报

这篇具有很好参考价值的文章主要介绍了vue+element-ui input输入框设置属性type为number去除右边的上下按键。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当 input type=number 时，去掉后面的上下按钮

<el-input type="number" clearable />

1.全局样式改变：

//在style里面添加此段代码即可

input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

2.在style中使用的是vue+element，通常写当前页面的样式时使用scoped，防止篡改其他页面样式，但是这样会发现上面的代码失效，此时需要使用/deep/去寻找

【定义样式】去除表框、去除上下箭头、去除滚轮事件

<el-input v-model="" type="number" class="topbut botbut" clearable />

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

  /deep/  .botbut inpit{
        border: none
    }
</style>

3.在style样式没有加入scoped，<style lang="scss">文章来源地址https://www.toymoban.com/news/detail-515163.html

<el-input v-model="" type="number" class="topbut botbut" clearable />

<style>
.topbut input::-webkit-outer-spin-button,
.topbut input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.topbut input[type="number"]{
    -moz-appearance: textfield;
}
.botbut inpit{
    border: none
}
</style>

到了这里，关于vue+element-ui input输入框设置属性type为number去除右边的上下按键的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

element-ui表单input输入框获取自动聚焦功能

1.问题描述当用户点击新增按钮时，弹出新增页面，需要form表单中的input框自动获取焦点 2.解决的方法第一步：给form表单的input输入框添加ref属性第二步：定义一个方法我是使用vue开发前端页面的，所以在methods中定义一个方法，在方法中写input输入框自动聚焦的功能第三步

2024年02月14日
浏览(33)
element-ui 动态渲染input输入框、下拉框并校验

先看效果：代码实现： HTML JS

2024年02月16日
浏览(31)
element ui el-input输入框type=number去掉上下箭头

使用vue框架写法如果是input标签type=number，将上述css代码中 ::v-deep 去掉即可

2024年02月12日
浏览(40)
【UI】修改element-ui input输入框placeholder提示信息、占位符的样式

如何修改代码如下：效果案例展示 vue2.x代码案例效果

2024年02月15日
浏览(31)
element-ui设置高度height属性与style属性设置的区别

在 element-ui 表格中，可以通过 style 属性和 heigh t属性来设置表格的高度。这两种方式的区别如下：使用 style 属性可以设置表格容器的样式，包括高度、宽度、边框等。例如：这里将表格容器的高度设置为 300px ，表格的高度是固定的，如果表格内容高度超过了 300px ，不会出

2024年02月07日
浏览(32)
element-ui 的 el-input-number的默认值设置为空

element 的 el-input-number的默认值设置为空用 el-input-number 来限制输入框智能输入数字，例如价格之类的， v-model 设为空和 null 时，默认的值显示为允许输入的最小值。如下：页面效果：解决方法： v-model 设置为 undefined ，就可以了。页面效果：

2024年02月12日
浏览(71)
vue结合element-ui实现（按钮控制）动态增加减少input框功能。

一、template部分二、script部分三、效果展示这是初始页面这是点击添加这是删除的四、详细说明 v-for=\\\"（item,index）in array\\\" :key = \\\"index\\\" 这个是重点！！！！通俗点将，就是用一个div（盒子）将input输入框包括起来，然后在div中使用 v-for=\\\"（item,index）in array\\\" :key = \\\"ind

2024年02月12日
浏览(47)
vue element-ui table点击编辑后，变成input、select、date

最近，在项目上需要table可以行内编辑，在table添加了input、select、时间控件，并且可以保存本行数据，当你点击编辑时，table的列就会变成相对应的input、select和时间控件，点击保存时，需要调用后台接口把本行的数据传个后台。参考网站：https://www.codenong.com/cs106360465/

2024年02月12日
浏览(38)
vue element-ui blur触发事件 vue中使用@blur获取input val值 elementui+vue

vue中使用@blur获取input val值

2024年02月11日
浏览(37)
[vue+element-ui] form中输入框无法输入问题的解决方法

目录一.问题发现：二.正确案例与错误原理：三.问题解决笔者在制作登录页面前端时使用elementui+vue技术，发现输入框无法输入任何内容。在csdn上查阅很多文章后发现都无法解决，于是去elementui官网进行反复查看才发现问题所在。最终发现问题是input标签中v-model写的不恰

2024年02月02日
浏览(41)