Henrique Almeida Marcomini Henrique Almeida Marcomini - 3 months ago 10
CSS Question

how to make a html input expand when the text inside is larger then the input itself

I have a input (html element) and sometimes the input (text) from the user is larger then the width of the input (html element) is there a way to make the input (html element) auto grow when the user is typing?

Obs. Better if made only with css

-------------------------------------EDIT 1-----------------------------------

I've made a JSfiddle, and as you can see the text is cropped when you enter to much text. I'm now trying to make it work with

<span contenteditable="true" >

Answer

If you need a no javascript/jquery solution I would recommend you to use contenteditable div instead of input element

Here's an example https://jsfiddle.net/sohelansari/631uzco9

Or if you want to use input element only, then unfortunately a pure css solution is not possible. You can write a jquery plugin, may be something like this -> Is there a jQuery autogrow plugin for text fields?.

Comments