在输入框加入搜索图标的问题

最近遇到了一个需要在搜索框内加入一个放大镜图标的需求，就像是这样。

这个本来是挺好解决的一个问题，只要在搜索框内加两句

background-image: url('../Imgry/fangdajing.png');
background-repeat:no-repeat;/*图标是否重复*/

就可以了。都是现在的问题是图标并不是在边缘(网上搜索了下大部分都是在最左或者最右)，所以必须要解决好图标定位的问题，想了很久也没啥很好的办法，最后只能用百分比的定位来暂时解决这个问题，但是用百分比的话有一个问题，就是在响应式的布局里，一旦比例发生改变，图标与文字之间的距离也会发生变形。

例如这是不同比例下的图标位置。

 

<div class="bady1-block1">
        <input type="text" name="" value="" class="bady1-block1-input" placeholder="输入你想搜索的"/>
</div>

.bady1-block1{
    width: 100%;
    height:4.8rem;
    background:rgba(255,255,255,1);
    padding: 1rem;
}
.bady1-block1-input{
    width:100%;
    height:3rem;
    background:rgba(241,241,241,1);
    border-radius:0.4rem;
    text-align: center;
    font-size:1.3rem;
    font-weight:400;
    color:rgba(179,179,179,1);
    line-height:1.85rem;
    background-image: url('../Imgry/fangdajing.png');
    background-repeat:no-repeat;/*图标是否重复*/
    background-position: 33% 50%;
    -webkit-background-size: 2rem 2rem;
    background-size: 2rem 2rem;
}

以上是我目前的代码，这个问题先码一下。如果有好的解决办法的话欢迎解答。

2019年9月4日10:33:43：今天重新想到了这个问题，并且想到了用JS代码来试着解决。

之前的问题在于搜索图标与搜索框内的文字间距无法固定，所以我想采用通过flex来设置图标与文字的定位，把搜索框设置为绝对定位，当用户点击搜索框时把图标与文字隐藏就能实现相同的效果，同时能解决间距的问题。

上代码：

H5

<div class="body1-div">
        <img src="Image/fangdajing.png"><p>请输入搜索内容</p><input class="flag1">
    </div>

CSS

.body1-div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10rem;
    padding: 1rem 2rem;
}
.body1-div img{
    z-index: 5;
    display: block;
}
.body1-div p{
    margin-left: 1rem;
    height: 8rem;
    font-size: 1.6rem;
    line-height: 8rem;
    z-index: 5;
    display: block;
}
.body1-div input{
    position: absolute;
    width: 95%;
    height: 8rem;
    border-radius: 20px;
    background: rgba(221,221,221,1);
}

JS

$(".body1-div").click(function () {
    $("p").css("display",function () {
        return "none";
    });
    $("img").css("display",function () {
        return "none";
    });
});

可以看到这个JS只实现了初步的功能，后面还能加很多东西，例如用户不在焦点搜索框时可以考虑重新把图标和文字重新加回去，还有用户输入的文字格式也没设置。不过都无所谓了，因为这些要看具体项目来设置。现在就提供一个思路。

2019年9月4日15:08:33：

实现了焦点不在搜索框且没有输入搜索内容时图标、文字重新出现的功能。

$(document).ready(function () {
    $(".body1-div").click(function () {
        $("p").css("display",function () {
            return "none";
        });
        $("img").css("display",function () {
            return "none";
        });
    });
});
$(function () {
    $(document).bind("click",function (e) {
        if($(e.target).closest(".body1-div").length == 0 && $(e.target).closest(".flag1").length == 0){
            if($(".flag1").val().length == 0){
                $("p").css("display",function () {
                    return "block";
                });
                $("img").css("display",function () {
                    return "block";
                });
            }
        }
    })
})