How to center a placeholder in a textarea without the text cursor starting in the middle?

Question

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?

Answer 1

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/