Vue 3中input type="number"箭头不显示且无法修改求助

常见原因 #

• 全局样式重置/UI框架默认样式：多数Vue项目会引入normalize.css、reset.css这类全局重置样式，或是Element Plus、Ant Design Vue等UI框架，这类样式往往会默认隐藏number输入框的箭头，核心规则如下：

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  

  你所有本地项目都出现问题，大概率是统一引入了这类包含隐藏规则的样式，而CodeSandbox默认未加载此类依赖，所以表现正常。

• 自定义全局CSS残留：检查项目的global.css、main.css，或是App.vue中不带scoped的<style>块，是否曾经手动添加过隐藏箭头的CSS规则，可能是之前开发时的遗留操作。

强制显示但无法修改的解决思路 #

如果尝试强制显示箭头却无效，通常是CSS优先级不足导致的：

• 全局样式可能使用了更高优先级的选择器（比如#app input[type="number"]），或者添加了!important锁定样式。
• 可以通过提升自定义样式的优先级来覆盖，比如给目标输入框所在的组件加类名，用后代选择器强化：

  .user-form input[type="number"]::-webkit-inner-spin-button,
  .user-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0;
    /* 这里可添加自定义样式，比如修改箭头大小、颜色 */
  }
  .user-form input[type="number"] {
    -moz-appearance: number-input;
  }
  

• 临时测试可使用!important（不推荐长期依赖，尽量通过优先级优化解决）：

  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
  }
  

总结 #

先从全局样式文件、UI框架默认样式入手排查，找到隐藏箭头的规则后，要么删除该规则，要么针对性编写高优先级样式覆盖。所有本地项目均出现此问题，说明你的项目模板或全局依赖中统一包含了这个隐藏箭头的样式规则。

内容的提问来源于stack exchange，提问作者9uifranco