当前位置：首页 > news >正文

VUE+ElementUI 使用el-input类型type=“number” 时，取消右边的上下箭头

news 来源：原创 2025/5/11 7:11:31

项目场景：

提示：这里简述项目相关背景：

在项目中有时候需要输入框的type=“number”，这个时候，输入框的右边就会出现两个按钮，这两个按钮可以递增/递减，但是这样输入框看上去就不太美观，就需要将其隐藏

解决方案：

提示：这里填写该问题的具体解决方案：

局部

<style scoped> // ===========================================使用::v-deep()// 使用el-input类型type=“number” 时，取消右边的上下箭头::v-deep(input::-webkit-outer-spin-button),::v-deep(input::-webkit-inner-spin-button) {-webkit-appearance: none;}::v-deep(input[type="number"]) {-moz-appearance: textfield;}::v-deep(inpit) {border: none}// ===========================================使用/deep//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>

全局

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type="number"] {-moz-appearance: textfield;}inpit {border: none}