Element Plus 数字输入框箭头隐藏方案

Element Plus 数字输入框箭头隐藏方案

问题描述

在 UniApp 环境下使用 Element Plus 的 el-input 组件时，type="number" 的输入框会显示右侧的数字调节箭头。常规的 CSS 方法在 UniApp 环境中无法生效。

解决方案

经过测试验证，以下 CSS 样式是在 UniApp 环境下唯一有效的隐藏方案：

/* 针对 Element Plus 数字输入框的特殊处理 */
.el-input__inner[type="number"]::-webkit-outer-spin-button,
.el-input__inner[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Firefox 浏览器兼容 */
.el-input__inner[type="number"] {
  -moz-appearance: textfield !important;
}

常见无效方案

以下方案在 UniApp 环境下经过测试均无效：

• 使用 input::-webkit-outer-spin-button 等常规选择器
• 仅设置 -webkit-appearance: none 而不添加其他属性
• 使用 input[type=number] 选择器而非 .el-input__inner[type="number"]
• 不使用 !important 声明的样式规则

注意：网上大部分教程提供的方案在 UniApp + Element Plus 环境下都无法生效，本方案是经过实际项目验证的唯一有效解决方案。

使用说明

• 适用于 UniApp + Element Plus 环境
• 兼容 WebKit 内核浏览器（Chrome、Safari 等）和 Firefox
• 必须使用 !important 声明以确保样式优先级
• 建议将此样式添加到全局样式文件中