How to adjust the alignment of placeholder text in the input field?

Question

The placeholder text in the third box appears in the middle while I want to be at the top. HTML

<div id="message"> <ul> <li><h1>Send us a message</h1></li> <li><input type="text" placeholder="Name"></li> <li><input type="text" placeholder="Email"></li> <li><input type="text" style="height:150px;" placeholder="Message"></li> <li><a href="#">Send</a></li> </ul> </div> 

Here is the JSFiddle

Answer 1

If you need a multi-line input field, you should use the textarea element.

 <li> <textarea placeholder="Message"></textarea> </li> 

Then you can use the style, but you like to use the textarea selector:

 #message input, #message textarea { width: 250px; height: 40px; padding: 10px; } #message li input[type=text], #message li textarea { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: none; } #message li textarea { height: 150px; resize: none; } 

JSFiddle demo .

Answer 2

To create placeholder text, you need the CSS properties of the provider prefix.

 ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; } 

Read this document

Updated:

In your case, you use an input field instead of a text area. Therefore, if you want to move text over use a text-area instead of using input .

Answer 3

try it

 ::-webkit-input-placeholder { text-align:center; } :-moz-placeholder { /* Firefox 18- */ text-align:center; } ::-moz-placeholder { /* Firefox 19+ */ text-align:center; } :-ms-input-placeholder { text-align:center; } 

Answer 4

instead

  <li><input type="text" style="height:150px;" placeholder="Message"></li> 

using:

 <li><textarea rows="4" cols="50" placeholder="Message"></textarea> </li>