input placeholder line-height issue - html

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;