调整<input type="number">字体大小时spinner不缩放，是否只能自定义实现？

你遇到的这个问题是Firefox和Safari对原生数值输入框微调按钮（spinner）的样式限制导致的，目前确实没有跨浏览器的标准方案能让spinner自动跟随font-size缩放。

浏览器现状 #

• Firefox：原生spinner属于浏览器内部封装的控件，Mozilla官方明确没有公开的标准CSS属性可修改其尺寸。修改输入框font-size时，输入区域会缩放，但spinner保持固定大小，大字体场景下视觉差距明显。
• Safari：不仅spinner尺寸不随字体变化，还将其放在输入框外部，进一步加剧视觉不协调，同样没有可靠的私有属性调整其大小。

临时折中方案（兼容性有限） #

如果不想立刻重写组件，可以尝试隐藏原生spinner，用CSS+JS模拟简易替代方案，保留原生输入框的核心功能：

/* 隐藏各浏览器原生spinner */
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; /* Firefox */
}

/* 自定义spinner容器 */
.number-input-group {
  display: inline-flex;
  align-items: stretch;
}
.number-input-group input {
  font-size: inherit;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-right: none;
}
.spinner-controls {
  display: flex;
  flex-direction: column;
}
.spinner-btn {
  font-size: inherit;
  width: 28px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.spinner-btn:first-child {
  border-bottom: none;
}

<div class="number-input-group" style="font-size: 24px;">
  <input type="number" value="10" min="0" max="100">
  <div class="spinner-controls">
    <button class="spinner-btn" onclick="this.parentElement.previousElementSibling.stepUp()">↑</button>
    <button class="spinner-btn" onclick="this.parentElement.previousElementSibling.stepDown()">↓</button>
  </div>
</div>

注意：这个方案需要给自定义按钮添加aria-label等无障碍属性，确保键盘用户能正常操作。

长期最优方案：自定义完整组件 #

对于无障碍要求高的场景，完全自定义spinner组件是最可靠的选择：

• 用<input type="text">或保留<input type="number">并隐藏原生spinner，配合自定义按钮实现数值增减逻辑。
• 实现键盘交互支持：上下箭头调整数值、Tab键切换焦点、Enter键确认等。
• 添加ARIA属性：role="spinbutton"、aria-valuenow、aria-valuemin、aria-valuemax，确保屏幕阅读器能正确识别组件功能。

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