输入元素内容的 CSS 宽度。min-content 不适用于输入

Question

min-content并且max-content似乎不关心输入元素的值：

input {
  border: 1px solid black;
  width: min-content;
}

<input type="text">

CSS 在计算最小内容时完全忽略输入的值，只使用一些默认宽度，无论内容如何，​​它都不会改变：

如何使 CSS 考虑“内容”（值）宽度：

不使用 javascript 来设置width，min-width或者max-width

Answer 1

如果没有 JavaScript，这是不可能的。

您必须以编程方式将输入的宽度设置为其值的长度。这可以通过该ch单元来简化。

document.querySelector('input').addEventListener('input', function() {
  this.style.width = this.value.length + 'ch'
})

<input type="text">