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

【问题标题】：How to adjust the alignment of placeholder text in input box?如何调整输入框中占位符文本的对齐方式？
【发布时间】：2014-01-28 04:35:17
【问题描述】：

第三个框中的占位符文本出现在中间，而我想在顶部。 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

【问题讨论】：

也许您应该使用textarea 而不是input type="text" 来发送消息？

标签： html css placeholder

【解决方案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.

【讨论】：

【解决方案2】：

要设置占位符文本的样式，您需要供应商前缀 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。

【讨论】：

如何将占位符对齐到顶部？
不，它不是在顶部移动文本，因为 OP 使用输入框而不是使用 textarea。

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

而不是

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

使用：

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

【讨论】：

【解决方案5】：

您可以使用vertical-align:text-top;轻松完成此操作

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

【讨论】：