HTML5 placeholder css padding

Question

I\'ve seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn\'t want to cooperate.

Anyway, her

Answer 1

I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.

I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.

Answer 2

If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}