CODEWITHSUNDEEP
htmlcss
cronoklee
cronoklee

Reputation: 6702

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

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' />

Upvotes: 4

Views: 14677

Answers (2)

cronoklee
cronoklee

Reputation: 6702

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' />

Upvotes: 13

Joseph Marikle
Joseph Marikle

Reputation: 78520

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' />

Upvotes: 7

Related Questions