Clever Geek Handbook

How do I center a placeholder in a textbox without a text cursor starting in the middle?

For example, I have

<textarea placeholder="blah blah blah">

</textarea>

and I am trying to center the placeholder this way ...

textarea[placeholder]
{
    text-align: center;
}

but when I do that the textbox cursor starts in the middle, not the left.

So how can I get the placeholder message in the center of the textbox without changing the initial cursor area?

+3


source to share


1 answer


You have to create a styleplaceholder

with the specific pseudo-elements syntax , which 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/

+7


source






More articles:


All Articles