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

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 JSFiddle

Equal

maybe you should use textarea instead of input type="text" for your message? – Firm

Answer 1

If you're wanting a multi-line input field you should use the textarea element.

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

You can then style this however you like using 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.

Quickstep

Answer 2

To style placeholder text, you'll need vendor prefix CSS properties.

::-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 input box instead of using text-area. So if you want to move your text on top use a text-area instead of using input.

Squish

How will this align placeholder to top? – Chrissy

No, it's not move text on top because OP used input box instead of using textarea. – Squish

Answer 3

Try this out

::-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; 
}

Shapely

Answer 4

instead of

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

use:

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

Publicity

Answer 5

you can do this in a easy way by using vertical-align:text-top;

<li><textarea style="vertical-align:text-top" placeholder="Message"></textarea> </li>

Glyndaglynias