How do I make an input type text stretch while I'm writing in it?

Question

input {
  background-color: black;
  color: #33ff00;
  font-family: ocr a extended;
  border: 0px;
  width: 110px;
  font-size: 16px;
}

<input type="text">

I tried display:inline-block, min-width, display:inline and they didn't work.

Answer 1

You need to use JavaScript.

Listen for the input event, set the input's width to 0px and get its scrollWidth, then set that back to the width of the input.

const input = document.querySelector('input');
input.addEventListener('input', function() {
  input.style.width = "0px";
  input.style.width = input.scrollWidth + "px";
})

input {
  background-color: black;
  color: #33ff00;
  font-family: ocr a extended;
  border: 0px;
  min-width: 110px;
  width:110px;
  font-size: 16px;
}

<input type="text">

Answer 2

You could also do this with HTML and CSS using an editable textbox

<div>
   <span class="input" role="textbox" contenteditable>Type here</span>
</div>

Learn more: https://css-tricks.com/auto-growing-inputs-textareas/

.input {
  background-color: black;
  color: #33ff00;
  font-family: 'ocr a extended', sans-serif;
  border: 0px;
  min-width: 110px;
  font-size: 16px;
  padding: 1px 10px;
}