当 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/去寻找
【定义样式】去除表框、去除上下箭头、去除滚轮事件文章来源:https://www.toymoban.com/news/detail-515163.html
<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模板网!