第三个框中的占位符文本显示在中间,而我想要位于顶部。 的 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
答案 0 :(得分:11)
如果您想要多行输入字段,则应使用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;
}
答案 1 :(得分:3)
要设置占位符文本的样式,您需要供应商前缀CSS属性。
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
<强>更新强>
在您的情况下,您使用输入框而不是使用文本区域。因此,如果您想将文字移到最高use a text-area instead of using input
上。
答案 2 :(得分:1)
试试这个
::-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;
}
答案 3 :(得分:0)
而不是
<li><input type="text" style="height:150px;" placeholder="Message"></li>
使用:
<li><textarea rows="4" cols="50" placeholder="Message"></textarea> </li>
答案 4 :(得分:0)
您可以使用vertical-align:text-top;
<li><textarea style="vertical-align:text-top" placeholder="Message"></textarea> </li>