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

这篇具有很好参考价值的文章主要介绍了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日
    浏览(43)
  • element-ui 动态渲染input输入框、下拉框并校验

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

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

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

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

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

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

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

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

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

    2024年02月12日
    浏览(81)
  • 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日
    浏览(58)
  • vue element-ui table点击编辑后,变成input、select、date

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

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

    vue中使用@blur获取input val值

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

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

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包