CODEWITHSUNDEEP
javascripthtmlcss
D_Joe
D_Joe

Reputation: 1

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

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.

Upvotes: 0

Views: 499

Answers (2)

Maggie Cody
Maggie Cody

Reputation: 679

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;
}

Upvotes: 0

Spectric
Spectric

Reputation: 31992

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

Upvotes: 2

Related Questions