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; 
} 

編輯

造型佔位符似乎有限。但一種方法可能會使用transform: translate(0, -50%);

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