【elementUI样式优化】之el-input输入数字类型 type=‘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>