简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

最简介的带图标的搜索框

php中世界最好的语言
发布： 2018-03-08 11:29:30
原创
1892 人浏览过

这次给大家带来最简介的带图标的搜索框，做出带图标搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。

最简介的带图标的搜索框

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form>input[type="search"]{
            height: 50px;
            padding: 10px;
            padding-left: 50px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D);
            background-repeat: no-repeat;
            background-size: 30px 30px;
            background-position:10px ;
            font-size: 20px;
            border: 1px #989898 solid;
        }
    </style>
</head>
<body>
    <form >
        <input type="search" />
    </form>
</body>
</html>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

 简易的图片点击上传功能

JS可以截取video的标签视频缩略图吗？

以上是最简介的带图标的搜索框的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
搜索 标的 简介
来源：php.cn
上一篇： 简易的图片点击上传功能 下一篇：怎样快速保存网页中的内容并且除去不想要的元素
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
查询和公式形成整个表，带有新列，其中新列是涉及其他条件列值的公式 编辑：公式应该是“值”列-根据类别具有最低user_id的“值”列。因此第2行将为0.04，因为类别“A”的最低“user_id”的“value”列是0.01。抱歉。我想从表中检索...
来自于 2024-04-06 21:23:40
0
2
530
MERN stack搜索框和复选框的正则表达式过滤器 我正在尝试通过边做边学来了解MERN堆栈如何协同工作，并且我正在遵循bezcoder的这些教程：Node.js/Express/MongoDb（Github整个代码）和Reactj...
来自于 2024-04-06 14:53:12
0
1
425
单击并滚动时隐藏/显示 div 我想创建一个隐藏的搜索表单，当我们单击搜索图标时，该表单会出现，而当用户单击或滚动时，搜索表单会隐藏。
来自于 2024-04-06 12:20:46
0
1
386
VueJS 调度函数的执行顺序导致问题 我正在尝试在页面上显示公告列表（从API检索）。我正在使用Vuex商店，并且有一个名为公告的状态。我还希望每次用户刷新/进入页面时都会更新此列表。所以我使用了生命周期钩子，特别是M...
来自于 2024-04-06 10:37:58
0
1
385
如何在MySQL表中插入多行并返回新的ID？ 通常我可以在MySQL表中插入一行并获取last_insert_id。但现在，我想将许多行批量插入到表中并获取ID数组。有谁知道我该怎么做？有一些类似的问题，但并不完全相同。我不想...
来自于 2024-04-06 10:03:44
0
2
294
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！