当设置input的placeholder字体大小与input字体大小不一致的时候，placehol

Question

业务需求需要，一个input在输入的时候要要比placeholder的字体大小大很多，导致无法垂直居中，求大神解决。

.pay-card .amount{

    float: right;

    text-align: right;

    line-height: normal;

    height: 36px;

    width:150px;

    padding-right: 20px;

    color: #121212;

    font-size:36px;

}

.pay-card .amount::-webkit-input-placeholder { /* WebKit browsers */

    color:#c5c5c5;

    font-size:13px;

    line-height: 36px;

    height: 36px;

}

.pay-card .amount:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color:#c5c5c5;

    font-size:13px;

}

.pay-card .amount::-moz-placeholder { /* Mozilla Firefox 19+ */

    color:#c5c5c5;

    font-size:13px;

}

.pay-card .amount:-ms-input-placeholder { /* Internet Explorer 10+ */

    color:#c5c5c5;

    font-size:13px;

}

<div class="pay-card">

        <label class="label">订单金额(元)</label>

        <input type="text" class="amount" id="amount" readonly placeholder="请询问商家后输入">

    </div>

Answer 1

<script type="text/javascript">&nbsp; &nbsp; function aa(event) {&nbsp; &nbsp; &nbsp; &nbsp; var Oinput = document.getElementById('amount');&nbsp; &nbsp; &nbsp; &nbsp; Oinput.style.fontSize=36+'px';&nbsp; &nbsp; &nbsp; &nbsp; Oinput.placeholder='';&nbsp; &nbsp; }&nbsp; &nbsp; function bb(event) {&nbsp; &nbsp; &nbsp; &nbsp; var Oinput = document.getElementById('amount');&nbsp; &nbsp; &nbsp; &nbsp; Oinput.style.fontSize=13+'px';&nbsp; &nbsp; &nbsp; &nbsp; Oinput.placeholder='请询问商家后输入';&nbsp; &nbsp; }</script><div class="pay-card"><label class="label">订单金额(元)</label><input type="text" class="amount" id="amount"&nbsp; placeholder="请询问商家后输入"&nbsp; onfocus="aa(event)" onblur="bb(event)">