HTML5, Placeholder, line-height in Webkit

Question

I have an input field:

with styles:

input {
    margin: 0;
    padding: 0         


        

Answer 1

I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;. Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.

Answer 2

Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:

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

Answer 3

Looking at your tags, I'm assuming you are writing something like...

<input type="text" placeholder="whatever">

Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...

input::-webkit-input-placeholder {}

You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder

Answer 4

It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.