Can't get placeholder centered with moz-placeholder

Question

I need to center only the placeholder in Firefox, but doesn't work, the placeholder appears at left.

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!">

You can try this bug with your FF23 and http://jsfiddle.net/eliaspizarro/ze4fV/

Answer 1

This isn't exactly a bug. There is simply no spec yet that browser vendors can follow. It appears that instead :placeholder-shown is on track to be standardized, although browsers do not support it right now.

The non-standard ::-moz-placeholder is restricted in what style rules it may accept. text-align is not one of the accepted rules (The rule doesn't have the CSS_PROPERTY_APPLIES_TO_PLACEHOLDER bit set).

So you cannot use text-align with ::-moz-placeholder at the time of writing.

However, you can text-align the whole <input>.

If you only want the placeholder text centered, but not entered text, then you may add some Javascript to set .style.textAlign according to the <input>.value when it changes. That's a nasty work-around, but should work. E.g. see this fiddle.

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