el-input-number 不能输入0

在使用 Element UI 的 `el-input-number` 组件时，通过 CSS 控制上下箭头仅在 hover 时显示可能会出现样式不生效的问题。主要原因在于浏览器默认的输入框样式覆盖了自定义的 CSS 规则，尤其是 WebKit 内核浏览器（如 Chrome）中的 `::-webkit-inner-spin-button` 伪元素控制着上下箭头的显示状态。 为了解决这一问题，需确保自定义的 CSS 样式具有足够的优先级，并且正确地作用于目标元素。以下是完整的解决方案： ### 核心 CSS 样式 ```css .el-input-number input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; display: none; /* 默认隐藏箭头 */ } .el-input-number:hover input[type="number"]::-webkit-inner-spin-button { display: inline-block; /* 鼠标悬停时显示箭头 */ } ``` 上述代码中，首先通过 `-webkit-appearance: none;` 移除了浏览器默认的上下箭头样式，然后通过 `display: none;` 将其隐藏；当鼠标悬停在组件上时，通过 `:hover` 状态重新激活箭头的显示[^1]。 ### 兼容 Firefox 浏览器 为了确保在 Firefox 中也能够隐藏上下箭头，可以添加以下样式： ```css .el-input-number input[type="number"] { -moz-appearance: textfield; } ``` 该样式将 Firefox 中的数字输入框外观设置为文本框，从而隐藏默认的上下箭头控件[^2]。 ### 完整示例代码 ```html <template> <el-input-number v-model="numberValue" :min="1" :max="100" /> </template> <script> export default { data() { return { numberValue: 1 }; } }; </script> <style scoped> .el-input-number input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; display: none; } .el-input-number:hover input[type="number"]::-webkit-inner-spin-button { display: inline-block; } .el-input-number input[type="number"] { -moz-appearance: textfield; } </style> ``` ### 注意事项 - 上述方法主要针对基于 WebKit 的浏览器，对于其他内核的浏览器可能需要额外处理。 - 若项目中使用了 CSS 模块化或 scoped 样式，应确保选择器能够正确匹配到目标 DOM 元素。 - 使用浏览器开发者工具检查元素是否被其他样式规则覆盖，必要时可尝试增加选择器权重或使用 `!important` 强制覆盖。

在 Vue 项目中使用 Element UI 的 `el-input-number` 组件时，若希望修改或隐藏输入框右侧的上下箭头（即浏览器默认的 `::-webkit-inner-spin-button` 控件），可以通过自定义 CSS 样式实现。 由于该伪元素仅适用于基于 WebKit 内核的浏览器（如 Chrome 和 Safari），因此需要结合 `-webkit-appearance` 属性进行样式重置，并通过其他属性控制其显示状态。以下为具体实现方式： ### 隐藏上下箭头 要隐藏默认的上下箭头，可以使用如下样式规则： ```css input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ``` 此规则移除了浏览器默认的控件外观，并清除了外边距以确保布局不受影响 [^2]。 ### 在 Firefox 中兼容性处理 Firefox 浏览器不支持 `::-webkit-inner-spin-button`，但可以通过设置 `-moz-appearance` 来隐藏数字输入框的上下按钮： ```css input[type="number"] { -moz-appearance: textfield; } ``` 这样可确保在不同浏览器下保持一致的外观 [^1]。 ### 在 scoped 样式中穿透子组件 如果样式作用域为 `scoped`，则上述规则不会直接生效于 `el-input-number` 内部的原生 `<input>` 元素。此时需使用 `::v-deep` 或 `:deep()` 实现样式穿透： ```css ::v-deep(input[type="number"]::-webkit-inner-spin-button), ::v-deep(input[type="number"]::-webkit-outer-spin-button) { -webkit-appearance: none; margin: 0; } ::v-deep(input[type="number"]) { -moz-appearance: textfield; } ``` 此方式允许在组件级样式中覆盖 Element UI 子组件的内部结构 [^3]。 ### 恢复默认行为或自定义显示逻辑 若希望仅在鼠标悬停时显示上下控件，可进一步扩展样式规则： ```css input[type="number"]::-webkit-inner-spin-button { display: none; } input:hover[type="number"]::-webkit-inner-spin-button { display: inline-block; } ``` 通过这种方式，可以在用户交互时恢复默认控件的显示效果，同时保持界面整洁 [^4]。 ---