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”号下沉，结果配置边距时就出现了连锁错误，这就把宽度减少；而且一开始也有设置内边距，其实可以去掉，这样可以把宽度设宽一点