input輸入框清除按鈕的顯示與隱藏

CSS樣式：

<style rel="stylesheet" type="text/css">
        .input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
        .clear { display: none; position: absolute; width: 20px; height: 20px; margin: 4px 0 0 -27px; background: url(clear.png);background-size:20px}
        .input::-ms-clear { display: none; }
        .input:valid + .clear { display: inline; }
    </style>

HTML結構：

輸入任意內容：<input id="input" class="input" required><a class="clear" href="#" onclick="clear1();return false;"></a>

JS交互：

<script type="text/javascript">
    function clear1(){
        var cle = document.getElementById("input").value;
        if(cle){
            document.getElementById("input").value  = '';
        }
    }
</script>

 

 

應用到項目中的代碼：

 <style rel="stylesheet" type="text/css">
        .recharge_count { padding: 0px; margin: 0; border: 1px solid #beceeb; }
        .clear { display: none; position: absolute; width: 21px; height: 21px; margin:15px 0 0 -38px; background: url(img/clear.png);background-size:20px}
        .recharge_count::-ms-clear { display: none; }
        .recharge_count:valid + .clear { display: inline; }
 </style>


<div class="recharge_detail">
        <span><font >當前余額: ¥ </font><p style="display: inline">0.00</p></span>
        <input name="number" class="recharge_count" id="recharge_count" placeholder="請輸入充值金額" required onchange="paymoney()"><a class="clear" href="#" onclick="clear1();return false;"></a>
</div>


function clear1(){
    var cle = document.getElementById("recharge_count").value;
    if(cle){
        document.getElementById("recharge_count").value  = '';
    }
}

可以參考“翼企購項目”

一開始我按照了最上面的代碼，然后再調整邊距問題，結果出現問題了：換不同手機會出現“X”號的位置有變化

審查元素之后發現是：輸入款設置了百分之百的寬度，所以導致“X”號下沉，結果配置邊距時就出現了連鎖錯誤，這就把寬度減少；而且一開始也有設置內邊距，其實可以去掉，這樣可以把寬度設寬一點