CSS. Placeholder and textbox with different font sizes - html

Question

I have an input field with the font size 45px. This field should have a placeholder with a font size 18px and vertical alignment of the placeholder should be the middle. I've tried the following code, but it doesn't work in Chrome and Opera.
Could you help me to find a solution without 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;
}

Answer 1

I think you need to add input before your pseudo element. Try this:
input::-webkit-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input::-moz-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input:-ms-input-placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
input::placeholder {
font-size: 18px;
vertical-align: middle;
line-height: 100px;
color: #000;
text-align: center;
}
EDIT
Styling placeholders seems limited. But a way to do it might be to use transform: translate(0, -50%);
input::placeholder {
font-size: 18px;
line-height: 100px;
text-align: center;
transform: translate(0, -50%);
}