firefox - 无法使用 moz-placeholder 使占位符居中

Question

我只需要在 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/ 尝试此错误

Answer 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";
});