【elementUI样式优化】之el-input输入数字类型 type=‘number‘ 不显示右侧上下箭头 == 修改箭头右边距

原创已于 2022-05-12 10:11:17 修改 · 4.3k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

小白Rachel

关注

标签

#elementui #vue.js #javascript

分类前端开发

于 2022-05-12 10:10:34 首次发布

elementUI组件优化专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何调整ElementUI的el-input组件在type='number'时的样式问题。针对有上下箭头的情况，可以通过修改el-input__inner的padding-right来确保箭头位于右侧；若不需要显示箭头，可以添加特定类名并应用CSS样式隐藏。具体实现包括对webkit内核的spin按钮的外观设置为none，以及使用Moz-appearance改变number类型的输入框样式。

先完成再完美，完成永远比完美重要。

使用element UI的el-input设置属性为type="number"时，样式很不好看

如果接受有上下箭头==>需要修改el-input_inner的边距，保证箭头在最右侧

如果不想显示箭头===>需要隐藏掉箭头样式

1. 保留el-input-number的箭头输入

之需要修改 el-input__inner的padding-right:0px即可

2. 去掉箭头样式

添加类名之后直接加上如下样式即可。


<el-input size="mini" type="number" class="numrule"></el-input>

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