0

Did a search and no joy... posting the question, if an existing answer exists, please share it :)

So what I have is a basic input field:

<input type="text" name="foo" id="bar" value="" maxlength="200" required>

What I would like to have happen, and I know this goes against all standards, but lets just ignore that, is to have the input field grow vertically (ie: downward) after the user has typed in a set number of characters (lets say, 30) so it looks more like a type=[textarea] than it does a type=[text]

It should also have the text stay aligned at the top of the input field and not be middle centered.

How would we go about doing this with query and css ??

Abela
  • 1,225
  • 3
  • 19
  • 42

2 Answers2

0

use textarea auto resize...download the jquery from here and add $(textarea).autoResize(); to your code and if u want it in jquery and html refer this fiddle

aashi
  • 492
  • 3
  • 11
0

I think this is what you are looking for:- enter image description here

When I give height(say height:300px;) to <input type="text"> tag, it shows text in middle, but to show text on the top, we have to give bottom padding(say padding-bottom:300px;), then it'll keep text on the top and will look like a text area.

<style type="text/css">
input#bar{ padding-bottom:300px;}
</style>
<input type="text" name="foo" id="bar" value="" maxlength="200" required>
DWX
  • 2,282
  • 1
  • 14
  • 15