CSS width of input element's contents. min-content doesn't work for inputs

Question

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

@tacoshy no because the answers very clearly set `width`, `min-width`, `max-width` — theonlygusti, Sep 12 '21 at 21:21
there are no other answer you can get. CSS has no way in setting the width to fit the content. The only way to do it is through scripting but you obviosly can't set a width of an element if you not allowed to use width. — tacoshy, Sep 12 '21 at 21:26
Consider using a [`contenteditable`](//developer.mozilla.org/docs/Web/HTML/Global_attributes/contenteditable) element instead. — Sebastian Simon, Sep 12 '21 at 21:28
@tacoshy the top answer on the duplicate has a solution to this question: set `size` using JS and `width: auto;` — theonlygusti, Sep 12 '21 at 21:34

score 5 · Answer 1 · answered Sep 12 '21 at 21:21

5

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">

answered Sep 12 '21 at 21:21

Spectric

JavaScript is allowed just not `width`, `min-width`, `max-width`, on the input – theonlygusti Sep 12 '21 at 21:23
1

@theonlygusti Without using one of those properties it makes it impossible to do it with JS or CSS. – Spectric Sep 12 '21 at 21:24
So it is possible with CSS using those properties? – theonlygusti Sep 12 '21 at 21:25
1

@theonlygusti No, if you can't use those properties, you can't set the input's width at all. – Spectric Sep 12 '21 at 21:26
Only JS is not allowed to set those properties. And if it's impossible, then a proof that it is impossible would be the selected answer. – theonlygusti Sep 12 '21 at 21:27
how do you want to proof it that it is impossible? It can only be proofed emperic which would blow the frame of the SO guidelines. – tacoshy Sep 12 '21 at 21:28
It is not even impossible. Setting `size` attribute and using css `width: auto;` makes this possible. – theonlygusti Sep 12 '21 at 21:31

1 Answers1