Как отрегулировать выравнивание текста заполнителя в поле ввода?

Question

Текст заполнителя в третьем поле появляется посередине, в то время как я хочу быть наверху. 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> 

Вот JSFiddle

Answer 1

Если Вы желаете поле ввода многострочный вы должны использовать textarea элемент.

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

Вы можете стилизовать это, однако, вы, как с помощью переключателя textarea:

#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

вместо

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

использование:

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

Answer 3

Для стиля текста заполнителя, вам необходимо свойство CSS префикса поставщика.

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

Обновлено:

В вашем случае, если вы используете поле ввода вместо текста-область. Поэтому, если вы хотите переместить текст сверху use a text-area instead of using input.

Answer 4

Попробовать это

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