Tushar Tushar - 4 days ago 7
CSS Question

input placeholder line-height issue

enter image description here

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

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:

enter image description here

Second Solution:

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

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