How can I make the width of the input and the value of the input have a proportional width, like contenteditable?

Question

Here is contenteditable ,The border will become wider or narrower with the input value。

How to make the 's border grow or shrink width the changing of the input value?

Answer 1

try something like this :

      <input
        type="text"
        oninput="this.style.width = this.value.length + 'ch' "
      />