I am struggling with styling an input field to have a font size of 45px while the placeholder text inside it should be 18px and vertically aligned in the middle. Unfortunately, my current code is not working in Chrome and Opera.
Can anyone offer a solution that does not involve JavaScript?
<input type="text" placeholder="Start typing your postal code..." />
input {
width: 300px;
border: 2px solid red;
padding: 0px 5px;
line-height: 100px;
font-size: 45px;
}
::-webkit-input-placeholder {
font-size: 18px;
vertical-align: middle !important;
line-height: 100px !important;
color:#000;
text-align:center;
}
::-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
:-ms-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
:-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}