热门文章
给大家分享一下前端用处很多的带小图标的搜索框的制作方法。
效果展示基本思路
1、搜索图像用绝对定位放到搜索框的上方
2、input框设置文本缩进，大小为搜索图像大小加上图像左右两边的外边距
准备
只需一个搜索图标图片，类似于下图
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框demo</title> <style type="text/css"> *{margin: 0;padding: 0; } body{width: 100vw;height: 100vh;background: radial-gradient(at center, #3498db,#2980b9);display: flex;justify-content: center;align-items: center; } p.search{height: 40px;width: 500px; } p.search form{width: 100%;height: 100%; } p.search form input:nth-child(2){width: 400px;height: 100%;font-size: 16px;text-indent: 40px;border: none;float: left; } p.search form input:nth-child(3){width: 100px;height: 100%;font-size: 16px;letter-spacing: 5px;border: none; } p.search form img{position: absolute;left: 50vw;transform: translateX(-250px);margin-top: 10px;margin-left: 10px;height: 20px; } </style></head><body> <p class="search"> <form action="#" method="post"><img src="./search_ico.png" alt=""><input type="text" name="condition" placeholder="请输入搜索条件"><input type="submit" value="搜索"> </form> </p></body></html>总结