如何为<input type="number">元素设置仅容纳两位字符的宽度？

嘿，针对你遇到的数字输入框宽度太宽的问题，我来分享几个实用的方案：

一、最可靠的CSS方案（优先推荐） #

正如你已经发现的，size属性在type="number"的输入框上确实不生效，直接用HTML的width属性也容易被浏览器的默认样式覆盖。最稳妥的方式是用CSS精准控制宽度：

方法1：使用ch单位（推荐） #

ch单位代表当前字体下数字"0"的宽度，刚好匹配你的两位数字需求，再加上一点内边距的余量，效果会很完美：

input[type="number"] {
  width: calc(2ch + 0.8em); /* 2ch对应两位数字，额外的em值适配内边距和边框 */
  padding: 0.2em 0.4em; /* 可选，优化输入框内的空间 */
}

方法2：使用固定宽度（适合字体固定的场景） #

如果你的页面字体是固定的，也可以直接设置固定的em或像素宽度：

input[type="number"] {
  width: 2.5em; /* 根据实际字体调整，确保能容纳两位数字 */
}

二、HTML方案的局限性 #

很遗憾，目前没有专门针对type="number"输入框的HTML属性来控制宽度：

• size属性仅对文本类输入（比如type="text"）生效，浏览器会忽略数字输入框的size设置
• HTML的width属性虽然理论上可以用在所有input上，但数字输入框的默认样式（比如右侧的增减按钮）会干扰宽度计算，实际效果不稳定

所以如果要保证跨浏览器的一致性，CSS方案是唯一靠谱的选择。

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