How do I vertically align placeholder text in textarea?

Question

I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.

.textbox1 { 
  width: 440px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

Answer 1

One option is to use line-height:

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

You can also use padding to control the position of the text.

Here's an example using padding-top

.textbox1 { 
    width: 440px;
    padding-top:15px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

UPDATE

Since the requirements include multi-line support, I'd recommend setting the top and bottom padding i.e:

.textbox1 { 
    width: 440px;
    height:6px;
    padding: 30px 5px;
}

.textbox1 { 
    width: 440px;
    height:60px;
    padding: 30px 5px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

Answer 2

This works for latest Firefox, IE/Edge, Chrome in pure CSS:

textarea { 
    width: 440px;
    height:600px; /* Note this is the same height as the placeholders line-height */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
    line-height:600px;
}
:-ms-input-placeholder { /* IE */
    line-height:600px;
}

See this fiddle. The key is to set the height of the textarea to the same line-height as the placeholder.

Sadly vertical-align: middle; seems not to be supported yet.

Answer 3

Instead of using padding-top which will increase the height of the textarea and extra space down use the line-height here is a sample, you can vary the line-height.

textarea::placeholder {
line-height: 90px;

}

you can also use transform property like this:

   textarea::placeholder {
transform: translateY(-20px);

}

Answer 4

Your best bet is to use padding, as line height will not work over multiple lines.

Additionally, make sure to take into account the line height / font size when calculating your padding.