input placeholder line-height issue

Question

What is the issue?

There is a input box with height 36px as show in above image. In IE10 placeholder is not vertically middle.

Answer 1

For all inputs just give

line-height:normal;

it will take normal line-height and will work fine in all browsers.

Answer 2

I usually set a height and line-height to the input[type=text] and inherit these properties to ::placeholder.

height: inherit;
line-height: inherit;

Answer 3

You can use waterwark js to fix this issue.

http://jsfiddle.net/maxim75/yJuF3/

Check out fiddle.

<input type="text" id="Text1" />

Answer 4

For anyone coming to this late--I found a solution that worked in Twitter Bootstrap (3.1) as well as a few other tests I ran.

Simply add to the input element:

height: inherit;
vertical-align: middle;

Answer 5

Solution:

Applied same 36px line-height to input[type="text"].

Side effect:

Before giving line-height: 36px it was working fine in all browser. As I applied 36px line-height to input[type="text"], below is what happened in Safari:

Second Solution:

Apply line-height with IE hack. That is as follows

input[type="text"] {
    line-height: 36px\9; // CSS Hack only for IE.
}

Answer 6

Adding line-height for placeholder on Firefox specifically fixes the issues. Otherwise adding line-height to ::placeholder breaks Safari.

  &::-moz-placeholder {
    line-height: 36px; // this should be equal to height of the input
  }

Answer 7

The accepted answer of line-height:normal; worked for me in almost every circumstance. But Firefox when the input height is specified in px was still giving me issues. I ended up needing to target the browser for this. I used the WordPress global $is_gecko, but there are many other solutions for other platforms out there for targeting the browser with a class, which I find to be the more durable solution than using any -moz hacks. It sucks targeting specific browsers, but sometimes it's needed.

Not sure why, but line-height: revert; seems to work in Firefox. Seems like if the main input has line-height: normal, then setting the placeholder explicitly to line-height: normal as well should have the exact same effect as line-height: revert but it does not seem to work that way in ff.

input.special-field {
    height: 48px;
    line-height: normal;
}
input.special-field::placeholder {
    height: inherit;
    line-height: normal;
    vertical-align: revert;
}
.gecko input.special-field::placeholder {
    line-height: revert;
}

Answer 8

Try to use this:

vertical-align:middle;