For example I have
<textarea placeholder="blah blah blah">
</textarea>
and I try to center the placeholder like so...
textarea[placeholder]
{
text-align: center;
}
but when I do that, the textbox cursor starts in the middle instead of the left.
So how do I get the placeholder message to show up in the center of the textarea without changing the starting cursor area?
For example I have
<textarea placeholder="blah blah blah">
</textarea>
and I try to center the placeholder like so...
textarea[placeholder]
{
text-align: center;
}
but when I do that, the textbox cursor starts in the middle instead of the left.
So how do I get the placeholder message to show up in the center of the textarea without changing the starting cursor area?
Share Improve this question edited Aug 16, 2014 at 19:57 JakeM asked Aug 16, 2014 at 19:29 JakeMJakeM 731 gold badge1 silver badge6 bronze badges 4-
Can you provide some reference to the
previewtarget
attribute? I'm not aware of it and can't find it on web. – Igor Jerosimić Commented Aug 16, 2014 at 19:46 - Oh sorry sorry brain fart, that was supposed to be "placeholder" not previewtarget, previewtarget is an ID for something I've been messing with far too much today. – JakeM Commented Aug 16, 2014 at 19:58
-
Now it makes sense. :) BTW with
textarea[placeholder]
selector you are applying style totextarea
that hasplaceholder
attribute, not on theplaceholder
itself. – Igor Jerosimić Commented Aug 16, 2014 at 20:15 - Ohhh I see that's what that does...my mistake. That's very useful information though, thanks! – JakeM Commented Aug 16, 2014 at 20:19
1 Answer
Reset to default 12You have to style the placeholder
with a special syntax for pseudo-elements that is vendor-specific:
::-webkit-input-placeholder {
color: red;
text-align: center;
}
:-moz-placeholder {
/* Firefox 18- */
color: red;
text-align: center;
}
::-moz-placeholder {
/* Firefox 19+ */
color: red;
text-align: center;
}
:-ms-input-placeholder {
color: red;
text-align: center;
}
http://jsfiddle/hmhu4a3x/2/