如何调整输入框中占位符文本的对齐方式？

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演示.