5

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?

JakeM
  • 73
  • 1
  • 1
  • 6
  • Can you provide some reference to the `previewtarget` attribute? I'm not aware of it and can't find it on web. – Igor Jerosimić Aug 16 '14 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 Aug 16 '14 at 19:58
  • Now it makes sense. :) BTW with `textarea[placeholder]` selector you are applying style to `textarea` that has `placeholder` attribute, not on the `placeholder` itself. – Igor Jerosimić Aug 16 '14 at 20:15
  • Ohhh I see that's what that does...my mistake. That's very useful information though, thanks! – JakeM Aug 16 '14 at 20:19

1 Answers1

12

You 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.net/hmhu4a3x/2/

Community
  • 1
  • 1
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • Thanks alot! I don't really understand how that works but thanks! (also sorry about posting a what was probably a duplicate, if I had remembered what it was called properly I wouldn't have had to ask) – JakeM Aug 16 '14 at 20:15
  • 3
    ```::placeholder``` is all that you need for modern browsers: https://caniuse.com/#feat=css-placeholder – Sámal Rasmussen Oct 25 '19 at 14:07