### 如何移除或自定义 Vue 中 el-input 数字输入框的默认上下箭头 在 Vue 的 Element Plus 或 Element UI 组件库中，`el-input` 提供了一个 `type="number"` 属性用于创建数字输入框，默认情况下会显示浏览器自带的上下箭头。如果需要移除这些箭头或者自定义样式，可以通过 CSS 和特定的选择器实现。 #### 移除默认上下箭头的方法 通过覆盖默认样式的 CSS 可以隐藏浏览器内置的上下箭头。以下是具体的实现方式： ```html <template> <div class="custom-input"> <el-input v-model="value" type="number"></el-input> </div> </template> <style lang="scss" scoped> .custom-input { ::v-deep input::-webkit-outer-spin-button, ::v-deep input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; /* 防止部分浏览器因去除箭头而增加额外间距 */ } ::v-deep input[type='number'] { -moz-appearance: textfield !important; /* Firefox 浏览器兼容性处理 */ } } </style> ``` 上述代码片段展示了如何利用 `::v-deep` 深度作用选择器来覆盖 `el-input` 的内部样式[^2]。具体来说： - `-webkit-appearance: none` 是针对 WebKit 内核浏览器（如 Chrome、Safari）移除箭头的关键属性。 - `-moz-appearance: textfield` 则是为了兼容 Firefox 浏览器的行为[^3]。 #### 自定义增减按钮样式 如果不仅想移除默认箭头，还希望替换为自定义的增减按钮，则可以借助 `el-input-number` 组件完成更复杂的交互逻辑。以下是一个示例： ```html <template> <div class="custom-number-input"> <el-input-number v-model="value" controls-class="custom-controls" :controls="true" ></el-input-number> </div> </template> <script> export default { data() { return { value: 1, }; }, }; </script> <style lang="scss" scoped> .custom-number-input { ::v-deep .el-input-number__decrease { background-color: #f5f7fa; border-top: 1px solid #dcdfe6; &:hover { background-color: #e9ebef; } } ::v-deep .el-input-number__increase { background-color: #f5f7fa; &:hover { background-color: #e9ebef; } } ::v-deep .custom-controls button { width: 28px; height: 28px; line-height: 28px; font-size: 14px; } } </style> ``` 在此示例中，`controls-class` 属性允许我们指定一个类名来自定义增减按钮的外观[^1]。同时，通过调整 `.el-input-number__decrease` 和 `.el-input-number__increase` 的样式，能够完全控制按钮的颜色、大小和其他视觉效果。 #### 注意事项 - 如果项目中启用了 Scoped CSS，在编写样式时务必加上 `::v-deep` 来穿透组件的作用域限制。 - 不同浏览器可能对表单控件的表现存在差异，因此建议测试多种环境下的表现并适当补充兼容性代码。 ---