当设置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">

    function aa(event) {

        var Oinput = document.getElementById('amount');

        Oinput.style.fontSize=36+'px';

        Oinput.placeholder='';

    }

    function bb(event) {

        var Oinput = document.getElementById('amount');

        Oinput.style.fontSize=13+'px';

        Oinput.placeholder='请询问商家后输入';

    }

</script>

<div class="pay-card">

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

<input type="text" class="amount" id="amount"  placeholder="请询问商家后输入"  onfocus="aa(event)" onblur="bb(event)">