Razvan Cuceu Razvan Cuceu - 3 months ago 29
CSS Question

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/

Answer

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