如何仅用CSS（无需JavaScript）实现HTML输入框宽度随内容自适应？

首先明确：目前纯CSS无法直接实时读取<input type="number">的输入值并据此动态调整宽度——因为CSS没有访问表单元素实时输入值的原生能力。不过可以通过以下两种思路实现接近自适应的效果，或者利用前沿CSS特性结合语义化结构模拟需求：

方案1：等宽字体+ch单位的动态范围控制 #

利用ch单位（代表当前字体下数字"0"的宽度）结合等宽字体，让输入框宽度在合理范围内随输入字符数弹性变化：

input[type="number"] {
  /* 用等宽字体确保每个数字宽度一致 */
  font-family: "Consolas", "Monaco", monospace;
  /* 初始宽度适配1-2位数字 */
  width: 2ch;
  /* 限制最大宽度（比如最多支持8位数字） */
  max-width: 8ch;
  /* 输入内容超过初始宽度时自动扩展 */
  min-width: 2ch;
  padding: 0.3em 0.5em;
  box-sizing: border-box;
}

这个方案的优点是纯CSS实现、无需额外HTML结构；缺点是无法精准匹配当前输入的字符数，仅在设定的宽度范围内弹性变化。

方案2：CSS变量+伪元素模拟（仅支持初始值） #

如果只需要根据初始value属性值自适应宽度，可以结合attr()和CSS变量实现：

<input type="number" class="auto-width-number" value="1234">

@property --input-value {
  syntax: "<string>";
  inherits: false;
  initial-value: "";
}

.auto-width-number {
  --input-value: attr(value);
  font-family: monospace;
  padding: 0.3em 0.5em;
  position: relative;
  width: fit-content;
}

.auto-width-number::before {
  content: var(--input-value);
  visibility: hidden;
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  padding: inherit;
  font: inherit;
}

注意：这个方案仅能根据初始value属性值设置宽度，输入内容变化后无法自动更新——因为attr(value)只能读取元素的初始属性值，无法获取实时输入值。

前沿CSS的可能性 #

目前CSS工作组正在讨论的:has()选择器和表单相关特性未来可能支持更精准的动态控制，但截至2024年，还没有原生CSS特性可以实时监听输入框的内容变化并调整宽度。如果需要完全精准的自适应效果，仍然需要JavaScript配合。

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