无法以 moz-placeholder 为中心获取占位符答案

【问题标题】：Can't get placeholder centered with moz-placeholder无法以 moz-placeholder 为中心获取占位符
【发布时间】：2013-09-16 12:15:37
【问题描述】：

我只需要在 Firefox 中将占位符居中，但不起作用，占位符出现在左侧。

CSS**

:-moz-placeholder { text-align:center; } /*FF Old*/
::-moz-placeholder { text-align:center; } /*FF19+*/
::-webkit-input-placeholder{ text-align:center; } /*Chrome*/
:-ms-input-placeholder{ text-align:center; } /*IE10*/

HTML**

<input id="test" placeholder="test!">

你可以用你的 FF23 和 http://jsfiddle.net/eliaspizarro/ze4fV/ 试试这个错误

【问题讨论】：

标签： firefox center placeholder

【解决方案1】：

这并不完全是一个错误。目前还没有浏览器供应商可以遵循的规范。相反，:placeholder-shown 似乎正在标准化，尽管浏览器目前不支持它。

非标准的::-moz-placeholder 受限于它可以接受的样式规则。 text-align 不是可接受的规则之一（rule 没有设置 CSS_PROPERTY_APPLIES_TO_PLACEHOLDER 位）。

因此，在撰写本文时，您不能将 text-align 与 ::-moz-placeholder 一起使用。

不过，你可以text-align整个<input>。

如果你只希望占位符文本居中，而不是输入文本，那么你可以添加一些Javascript来设置.style.textAlign，当它改变时根据<input>.value。这是一个令人讨厌的解决方法，但应该可以。例如。见this fiddle。

<input>.addEventListener("input", function(e) {
    this.style.textAlign = this.value === "" ? "center" : "left";
});

【讨论】：