HTML5, Placeholder, line-height in Webkit

Question

I have an input field:

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

with styles:

input {
    margin: 0;
    padding: 0 6px;
    font-size: 19px;
    line-height: 19px;
    height: 36px;
    width: 255px;
}

Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?

Thanks

The placeholder text in the input is not being aligned with the line-height CSS rule. — AnApprentice, Feb 13 '11 at 04:41
Looks like it's a Chrome bug: http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem — Emily, Feb 13 '11 at 12:30

score 27 · Answer 1 · edited Apr 15 '16 at 00:02

27

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; }

edited Apr 15 '16 at 00:02

Greg

9,963
5
43
46

answered Jul 16 '13 at 15:59

Matt Born

289
3
5

3

Please add some kind of clarification/explanation – tnw Jul 16 '13 at 16:16

score 18 · Accepted Answer · answered Feb 13 '11 at 05:24

18

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

answered Feb 13 '11 at 05:24

methodofaction

70,885
21
151
164

Thanks for the help . however its unique. placeholder should inherit these styles implicitly. – Swastik Pareek May 19 '17 at 07:36

score 10 · Answer 3 · answered Nov 14 '11 at 16:03

10

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.

answered Nov 14 '11 at 16:03

Steve Klein

571
5
6

This worked for me. But in some cases you might not want to remove your `line-height` for inputs so it might not work for everyone. – Patrick Arlt Dec 01 '11 at 19:28
Excellent. line-height:normal; is something I've never resorted to before but it makes sense here. I'd say placeholders and their fluctuating selector standards are a good excuse for some imperfect code that fixes it by removing rather than adding :) – jerclarke Jan 16 '14 at 15:44
The input element only operates on one line - line-height does not apply. – John Spiteri Nov 07 '16 at 13:24

score 1 · Answer 4 · answered Feb 13 '11 at 02:46

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.

HTML5, Placeholder, line-height in Webkit

4 Answers4

Linked