Sometimes, we want to make HTML text input field grow while typing with CSS.
In this article, we’ll look at how to make HTML text input field grow while typing with CSS.
How to make HTML text input field grow while typing with CSS?
To make HTML text input field grow while typing with CSS, we set the max-width style of a contenteditable element.
For instance, we write
span {
border: solid 1px black;
}
div {
max-width: 200px;
}
to set the max width of the container div to 200px.
Then we write
<div>
<span contenteditable="true">sdfsd</span>
</div>
to add a contenteditable span inside the div so we can type in the span.
Conclusion
To make HTML text input field grow while typing with CSS, we set the max-width style of a contenteditable element.