如何在html表单中把输入字段的占位符对齐?
我正在使用下面的代码,但它不起作用。
CSS ->
input.placeholder {
text-align: center;
}
.emailField {
top:413px;
right:290px;
width: 355px;
height: 30px;
position: absolute;
border: none;
font-size: 17;
text-align: center;
}
HTML ->
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
如果你只想改变占位符样式
::-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;
}
input{
text-align:center;
}
就是你所需要的一切。
[工作实例][1] 在FF6中。这种方法似乎并不跨浏览器兼容。
你之前的CSS试图将一个输入元素的文本居中,该元素的类别为"占位符"。
HTML5占位符元素可以为那些接受该元素的浏览器进行样式设计,但有不同的方式,你可以在这里看到:http://davidwalsh.name/html5-placeholder-css。
但我不相信text-align
会被浏览器解释。至少在Chrome上,这个属性被忽略了。但你总是可以改变其他东西,如颜色
、字体大小
、字体家族
等。我建议你重新考虑你的设计,是否有可能去除这个中心行为。
编辑
如果你真的想要这个文本居中,你可以使用一些jQuery代码或插件来模拟占位符行为。这里有一个例子:http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。
这样一来,这个样式就可以工作了。
input.placeholder {
text-align: center;
}