Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
83
rated 0 times [  87] [ 4]  / answers: 1 / hits: 138473  / 13 Years ago, tue, august 23, 2011, 12:00:00

I can set initial text input size in css, like so:



width: 50px;


But I would like it to grow when I type until it reaches for example 200px.
Can this be done in straight css, html, preferably without javascript?



Do post your js/jquery solutions too of course, but if this is doable without them - that be great.



my try here:



http://jsfiddle.net/jszjz/2/


More From » jquery

 Answers
64

Here is an example with only CSS and Content Editable:


jsFiddle Example


CSS


span 
{
border: solid 1px black;
}
div
{
max-width: 200px;
}

HTML


<div>
<span contenteditable="true">sdfsd</span>
</div>



Important note regarding contenteditable


Making an HTML element contenteditable lets users paste copied HTML elements inside of this element. This may not be ideal for your use case, so keep that in mind when choosing to use it.


[#90458] Monday, August 22, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
adam

Total Points: 363
Total Questions: 102
Total Answers: 104

Location: Burkina Faso
Member since Thu, Dec 15, 2022
1 Year ago
;