Vertically align an input placeholder with CSS (or set line-height)

user_661643 0
Viewed 12079

Is it possible to vertically align a placeholder independently of the parent input? There seems to be no way to have the placeholder in the code below appear in the vertical center of the input field. I've tried all css properties and workarounds I can think of or find online but the different font sizes on the input and the placeholder seem to make it impossible in webkit browsers at least.

Edit: Left is the issue, right is the desired look: enter image description here

input {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  font-size: 9px;
  text-transform: uppercase;
  color: #AAA;
}
<input type='text' placeholder='enter some text' />

css html
2 Answers

The best solution out there might be to simply add a translate3d transform to the placeholder CSS rule as follows:

input {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  font-size: 9px;
  text-transform: uppercase;
  color: #AAA;
  transform:translate3d(0,-4px,0)
}
<input type='text' placeholder='enter some text' />

user_6616430

This feels like such a stupid "solution", but maybe you could substitute transform:scale(0.45) in place of the font-size: 9px;. It seems to work just about anywhere font-size in ::-webkit-input-placeholder is supported.

input {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  text-transform: uppercase;
  color: #AAA;
  transform: scale(0.45);
}
<input type='text' placeholder='enter some text' />

Edit: Left Aligned

input {
  font-size: 22px;
  text-align: left;
  font-weight: bold;
  line-height: 44px;
}

input::-webkit-input-placeholder {
  text-transform: uppercase;
  color: #AAA;
  transform: scale(0.45);
  transform-origin: 0% 50%;
}
<input type='text' placeholder='enter some text' />

user_8542460
Related