Positioning of text inside input

Use a <textarea> instead:

#messageBox{
    width: 200px;
    height: 250px;
}

<textarea id="messageBox"></textarea>

Or if you need input and you don't need more rows, you can use padding instead height.

For example this code, but it's look crazy:

#messageBox {
  width: 200px;
  padding: 0 0 250px 0;
}

<input id="messageBox" value="test">

Add bottom padding with box-sizing (so that the padding doesn't increase the height of the input):

#messageBox
{
  width: 200px;
  height: 250px;
  padding-bottom: 222px;
  box-sizing: border-box;
}

<input id="messageBox" />

Maybe add padding and let the height auto compute.

I assume that you know about textarea.

However, if you want the single line input field to have a tall box for design purposes, it can be done.

Design Note: This styling allows you to place a background image below the text input area without having to add extra mark-up, which may be useful at times.

#messageBox
{
  width: 200px;
  padding-bottom: 250px; /* approximately... */
  background:  0 30px no-repeat url(http://placekitten.com/1000/500);
}

<input id="messageBox" value="Test">

Change the HTML as,

<textarea id="messageBox"></textarea>

Use textarea instead of invalid input

html

<textarea id="messageBox"></textarea>

css

#messageBox
{
width: 200px;
height: 250px;
resize:none
}

http://jsfiddle.net/16sb2rnb/3/

You should use the textarea element instead.

<textarea id="messageBox"></textarea>

http://jsfiddle.net/16sb2rnb/5/

You can use the <textarea> element to achieve this.

As the comments say, change <input> to <textarea>

#messageBox {
  resize: none;
}

<textarea id="messageBox" rows="6" cols="50">

To increase height, just add more to rows