VUE+ElementUI 使用el-input类型type=“number” 时,取消右边的上下箭头
项目场景:
提示:这里简述项目相关背景:
在项目中有时候需要输入框的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}