CODEWITHSUNDEEP
htmlcss
Razvan Cuceu
Razvan Cuceu

Reputation: 577

Input placeholder vertical align

How to properly vertically center placeholder in an input field?

input[type='text']{
  background-color: rgba(255,255,255,.4);
  border:3px solid rgba(0,0,0,.5);
  min-height: 45px;
  border-radius: 6px;
  color:#fff;
}
input[type='text']::-webkit-input-placeholder {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 30px;
  text-transform: uppercase;
  vertical-align: middle;
}

Here is the code https://jsfiddle.net/u6qfwg3w/

Upvotes: 7

Views: 33228

Answers (2)

kukkuz
kukkuz

Reputation: 42352

I believe that as you have set min-height: 45px you should set line-height: 45px too in input[type=text].

See that for the placeholder if you vary font-size, the placeholder will stay vertically centered.

Please let me know your feedback. Thanks!

input[type='text']{
  background-color: rgba(255,255,255,.4);
  border:3px solid rgba(0,0,0,.5);
  min-height: 45px;
  line-height: 45px;
  border-radius: 6px;
  color:#fff;
}
input[type='text']::-webkit-input-placeholder {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  vertical-align: middle;
}

fiddle here

Upvotes: 1

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

You forgot to add this css to input element: 

input[type='text']{
 font-size: 30px;
 color: rgba(255, 255, 255, 0.4);
 line-height: 30px;
}

Here is the fiddle: fiddle link

Upvotes: 4

Related Questions