.el-input__wrapper:hover{ .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease{ display: inline-block !important; } }不生效

在使用 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` 强制覆盖。