最近遇到了一个需要在搜索框内加入一个放大镜图标的需求,就像是这样。
这个本来是挺好解决的一个问题,只要在搜索框内加两句
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";
});
}
}
})
})