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