前言

给大家分享一下前端用处很多的带小图标的搜索框的制作方法。

效果展示

基本思路

1、搜索图像用绝对定位放到搜索框的上方

2、input框设置文本缩进，大小为搜索图像大小加上图像左右两边的外边距

准备

只需一个搜索图标图片，类似于下图

代码

搜索框demo

*{

margin: 0;

padding: 0;

}

body{

width: 100vw;

height: 100vh;

background: radial-gradient(at center,

#3498db,#2980b9);

display: flex;

justify-content: center;

align-items: center;

}

div.search{

height: 40px;

width: 500px;

}

div.search form{

width: 100%;

height: 100%;

}

div.search form input:nth-child(2){

width: 400px;

height: 100%;

font-size: 16px;

text-indent: 40px;

border: none;

float: left;

}

div.search form input:nth-child(3){

width: 100px;

height: 100%;

font-size: 16px;

letter-spacing: 5px;

border: none;

}

div.search form img{

position: absolute;

left: 50vw;

transform: translateX(-250px);

margin-top: 10px;

margin-left: 10px;

height: 20px;

}

总结

以上所述是小编给大家介绍的基于html css实现带搜索图标的搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！