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.

Modica

Can you please post the css that applies to the inputs? It's tricky to see what might be causing it without the code. – Hoogh

If you use line-height: Try adding vertical-align: middle to the text – Stevenstevena

You don't need line-height, share your complete code jsfiddle.net/VNrsQ – Sammons

Do you load some kind of reset css? If not maybe you should. – Gristede

vertical-align: middle did not work here, I had used bootstrap 2.3.2 css. What I have understood from this is, if we give height to input we need to set line-height for having it vertically centered in IE10. – Modica

Answer 1

For all inputs just give

line-height:normal;

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

Dope

So why is normal not the standard 😂, great answer tho! Worked like a charm. – Magneto

I usually do line-height: inherit;, but this is a better strategy! – Chickasaw

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;

Duane

Answer 3

You can use waterwark js to fix this issue.

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

Check out fiddle.

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

Winder

I had issue with vertical alignment of placeholder, I think you have shared above demo for having placeholder. – Modica

Yes, just adding placeholder property in your input tag won't guarantee the alignment of it perfectly on every browser. So you can go for watermark JS solution, if you wish. – Winder

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;

Stile

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

Modica

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
  }

Splutter

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

Dimerous

Answer 8

Try to use this:

vertical-align:middle;

Trenttrento