Html 如何调整输入框中占位符文本的对齐方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21023394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to adjust the alignment of placeholder text in input box?
提问by Orahmax
The placeholder text in the third box appears in the middle while i want to be at the top. HTML
第三个框中的占位符文本出现在中间，而我想在顶部。 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
这是JSFiddle
回答by James Donnelly
If you're wanting a multi-line input field you should use the textareaelement.
如果您想要一个多行输入字段，您应该使用该textarea元素。
<li>
<textarea placeholder="Message"></textarea>
</li>
You can then style this however you like using the textareaselector:
然后，您可以使用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;
}
回答by Ishan Jain
To style placeholder text, you'll need vendor prefix CSS properties.
要设置占位符文本的样式，您需要供应商前缀 CSS 属性。
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
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.
在您的情况下，您使用输入框而不是使用文本区域。因此，如果您想将文本移到顶部use a text-area instead of using input。
回答by Shabeer Mothi
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;
}
回答by Dipak
instead of
代替
<li><input type="text" style="height:150px;" placeholder="Message"></li>
use:
用：
<li><textarea rows="4" cols="50" placeholder="Message"></textarea> </li>
