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

前端码农.2025-09-13 10:10

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

问题描述

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

解决方案

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

css 复制代码

/* 针对 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 声明以确保样式优先级
建议将此样式添加到全局样式文件中