Placeholder text is not vertically centered in Safari

Question

Do you have any idea on how to get the placeholder attribute to vertically center in safari? Though when you start typing, the text is perfectly centred.

Answer 1

Had this bug too. Setting line-height in ems fixed this for me. It looks the same in Chrome, Safari(desktop and iOS) and Firefox. and I added a \9 trick to get vertical centering in IE. here's my css

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

Answer 2

For me the best solution is to use line-height:normal and hack for IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

Answer 3

-Safari Solution-

I got stuck on this issue for a long time despite using

input::-webkit-input-placeholder { line-height:normal!important; }

It turns out that having a line-height in the immediate input element was breaking my input::webkit-input-placeholder line-height.

Solution extended:

I removed the line-height in my input style and it fixed my issue.

Answer 4

The easiest way is to use both the line-height and height CSS properties. Just give the text input a line-height with the same value as its height.

By the way, your live site looks okay to me in chrome 16.

Answer 5

For me this worked well:

line-height: inherit;

Answer 6

None of the other answers worked for me, maybe because my input element is inside a flex box.

I ended up needing to specify a line-height in px - with a large value for the line-height compared with the default for input elements.

input[type="text"] { line-height: 32px; }

Feels like a hack, but it's the only thing I could get to work.