When VUE+ElementUI uses el-input type type="number", cancel the up and down arrows on the right
Problem Description
When using the el-input component of elementUI, I want to enter only numbers in the input box, so I set the type attribute type="number", but the progress up and down arrows appear on the right.
The default effect
finally implements the effect
code
<div class="tableForm">
<el-input v-model="value" type="number" placeholder="请输入内容" clearable />
</div>
solution
1. Global solution takes effect
Add the following code in style to cancel the right arrow of all el-input type type="number"
<style lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
inpit {
border: none
}
</style>
2. Only the local current page takes effect.
1. Add the specified class name through the parent element to find the corresponding el-input
Case: Cancel the right arrow of all el-input type type="number" under the parent element class named tableForm
<style lang="scss">
.tableForm {
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
inpit {
border: none
}
}
</style>
2. Add scoped attribute to style
Use the scoped attribute on the current page style to avoid affecting other page styles. It only takes effect on the current page. However, if you directly take the style according to method 1, it will have no effect. The style will not work, so you need to use the depth selector /deep/ To find
<style scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ input[type="number"] {
-moz-appearance: textfield;
}
/deep/ inpit {
border: none
}
</style>
The above is personal experience, I hope it will be helpful to everyone!