CSS。プレースホルダと異なるフォントサイズのテキストボックス

Question

私はフォントサイズ45pxの入力フィールドを持っています。このフィールドには、フォントサイズが18pxのプレースホルダーがあり、プレースホルダーの垂直方向の配置は中央になければなりません。私は次のコードを試しましたが、ChromeとOperaでは動作しません。

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

私はあなたの擬似要素の前にinputを追加する必要があると思います。これを試してみてください：

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

スタイリングプレースホルダは、限られたようです。しかし、それはtransform: translate(0, -50%);

input::placeholder { 
    font-size: 18px; 
    line-height: 100px; 
    text-align: center; 
    transform: translate(0, -50%); 
}