Input's placeholder misaligned in Chrome when input and placeholder have different font size

Question

When the placeholder's font-size is different to input font-size, the placeholder is misaligned vertically in Chrome (in Firefox it works fine).

Screenshot:

Here is the HTML / CSS:

body {
  padding: 20px;
}
input {
  padding: 0 10px;
  color: green;
  font-size: 30px;
  height: 57px
}
input::-webkit-input-placeholder {
  color: blue;
  font-size: 14px;
  line-height: 57px;
}
input::-moz-placeholder {
  color: blue;
  font-size: 14px;
}

<input type="text" value="" placeholder="Placeholder text">

Also available as a jsFiddle.

Answer 1

This seems like buggy behaviour by Chrome, the placeholder is aligned vertically with the baseline of the larger font size in the input.

In order to correctly vertically center the smaller placeholder text in Chrome, you can use position: relative and top: -5px as a workaround.

Workaround

body {
  padding: 20px;
}
input {
  padding: 0 10px;
  color: green;
  font-size: 30px;
  height: 57px;
}
input::-webkit-input-placeholder {
  color: blue;
  font-size: 14px;
  position: relative;
  top: -5px;
}
input::-moz-placeholder {
  color: blue;
  font-size: 14px;
}

<input type="text" value="" placeholder="Placeholder text">