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