为何添加max属性会改变number类型input元素的CSS样式？

我有两个type="number"的input元素，二者的min属性均设为0。其中第二个元素额外设置了max="100"，但其宽度看起来比第一个元素更窄。代码示例如下：

<input type="number" min="0" />
<input type="number" min="0" max="100" />

请问为何添加max属性会导致该元素的CSS样式发生变化？

这是浏览器的默认样式行为导致的：

• 未设置max的number输入框，浏览器无法预判用户输入的数值长度，会默认分配相对较宽的宽度，以适配更长的数字输入。
• 同时设置min和max时，浏览器会根据数值范围的最大位数（比如max="100"是3位数），自动调整输入框的默认宽度，使其刚好适配该范围内最长的数值，因此第二个输入框看起来更窄。

这种自适应调整是浏览器为优化用户体验的设计，不同浏览器的具体计算逻辑略有差异，但核心都是基于数值范围预估所需宽度。

如果要让两个输入框宽度一致，可通过自定义CSS强制设置固定宽度：

input[type="number"] {
  width: 120px;
}

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