Question

Views

min-content and max-content don't seem to care about the input element's value:

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

<input type="text">

CSS totally ignores the input's value when figuring out min-content, just using some default width that never changes no matter the contents:

How can I make the CSS take the "content" (value) width into account:

Without using javascript to set width, min-width or max-width

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-07-13T11:07:27.202Z

It is not possible without JavaScript.

You have to programmatically set the input's width to the length of its value. This can be simplified with the ch unit.

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

<input type="text">