如何使<input>元素仅占用内容所需宽度且随内容自适应增长？

对于input[type="number"]这类默认占用过多空间的输入框，直接用width: fit-content没效果，主要是因为浏览器给输入框加了默认内边距、边框，还有数字输入框自带的上下箭头控件影响了宽度计算。可以用以下纯CSS方案解决：

1. 先隐藏数字输入框的默认箭头（避免箭头占用额外宽度），再设置自适应宽度：

/* 移除WebKit内核浏览器的数字箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 移除Firefox的数字箭头 */
input[type="number"] {
  -moz-appearance: textfield;
}
/* 设置自适应宽度，同时确保盒模型计算正确 */
input[type="number"] {
  width: fit-content;
  box-sizing: border-box;
  /* 可选：根据需求调整内边距，避免内容贴边 */
  padding: 2px 4px;
}

2. 如果需要兼容更老的浏览器，也可以用display: inline-block配合width: max-content（主流现代浏览器均支持）：

input[type="number"] {
  display: inline-block;
  width: max-content;
  box-sizing: border-box;
  /* 移除数字箭头 */
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

fit-content和max-content都是基于内容的宽度值，会自动根据输入框内的内容长度调整宽度，完全不需要依赖flex布局，适配大多数场景。

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