首页 > 网页制作 > CSS

基于html css实现带搜索图标的搜索框功能

admin CSS 2022-02-06 00:48:22 html   css   搜索   图标   搜索框"

前言

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

效果展示

在这里插入图片描述
在这里插入图片描述

基本思路

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

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

准备

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

在这里插入图片描述

代码




 
 搜索框demo
 


 

总结

以上所述是小编给大家介绍的基于html css实现带搜索图标的搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对潘少俊衡网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/74686.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持