前言

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

效果展示

基本思路

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;}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实现下拉菜单

只用CSS的轮播图？快来看一看！

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

html、css做一个带搜索图标的搜索框（方法分享）相关推荐

html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
html+css 带图片的搜索框
最近写B/S项目比较忙,很久没更新,今天分享一个B/S比较常见的带图片的搜索框代码.希望可以对你们有所帮助. 效果图先展示一下: 图片用的是阿里巴巴矢量图标库的图,需要用到的话,直接拷贝到代码里面就可 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

html、css做一个带搜索图标的搜索框（方法分享）

html、css做一个带搜索图标的搜索框

前言

效果展示

基本思路

准备

代码

本博客其他文章推荐

html、css做一个带搜索图标的搜索框（方法分享）相关推荐

最新文章

热门文章