这篇文章给大家分享的是有关css如何实现带搜索图标的搜索框功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
前言
给大家分享一下前端用处很多的带小图标的搜索框的制作方法。
效果展示
基本思路
搜索图像用绝对定位放到搜索框的上方
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; } 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; } </style></head><body> <div class="search"> <form action="#" method="post"> <img src="./search_ico.png" alt=""> <input type="text" name="condition" placeholder="请输入搜索条件"> <input type="submit" value="搜索"> </form> </div></body></html>感谢各位的阅读！关于“css如何实现带搜索图标的搜索框功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
