HTML搜索框里面加入东西

图片说明
百度的这个搜索框里面的图片要怎么加进去
我做的练习
图片说明
试图在里面加东西变成了这样(缩小了前面input的比例,添加的部分没有上去)
图片说明

0

4个回答

span外面加个div试试?

0

审查元素 ,你会发现那个看上去是input的东西实际上是一个div,里面一个input 标签再加上一个span 标签 。
百度的和csdn的实现都是一样。

 <div>
 <input type=text /><span><span>
 </div>
 是这样的结构,设置input的边框去掉,和div等高,后面一个小的图像标签。这样实现的
0

容器relative定位,你那个图片发荣起里面absolute定位到容器需要的位置就行了

0

直接把百度那个扣下来就可以了。

审查元素。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
HTML5设置搜索框中添加小图标
HTML5设置搜索框中添加小图标 HTML5部分 &lt;div class="Search"&gt; &lt;input type="text" value="Search" onfocus="if(value=='Search')value=''" onblur="if(!value)value='Search'" name="keyword" class="sear...
前端笔记31——在自己的网页中嵌入百度搜索框
前言 在前面我分享了我学习到的表单知识,我也明白了我们常见的百度搜索框也是通过表单去实现的。下面分享一下在自己的网页中嵌入百度搜索框。 在自己的网页中嵌入百度搜索框 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;
H5写搜索框:将搜索图标放入搜索框之内
最近在模仿写新浪微博的首页,其中搜索框的搜索按钮位于搜索框之内,突然想起刚刚接触前端的时候被这个给难住了,哎......实在是惭愧啊! 思想很简单:将input(type=text)和input(type=button)放入同一个div中,给这个div一个边框border,而input(type=text)不设置边框,这样就达到了效果。 代码如下: .search { float: l
搜索框添加放大镜图片(绝对定位和相对定位)
###实现效果如下
搜索框内显示文字的代码
默认模板修改 page_header.lbi 搜索 将其替换成               onblur="if (this.value=='') this.value='想找什么?输入商品名称试试';"               onclick="if (this.value=='想找什么?输入商品名称试试') this.value='';"               va
[HTML5] 在自己的网页中加上百度搜索框
一、查看百度源码 1.打开https://www.baidu.com,F12查看源码 2.form 的 action="/s",表示数据提交到https://www.baidu.com/s 3.输入框的name=“wd” 二、如何加入? 1.知道了输入框的name及数据提交到哪儿,就可以实现了,代码如下: &lt; form action="https://www.baidu.com/s"...
把搜索按钮放在搜索框内
search body {     font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;     font-size:14px; } h1 {     margin-top:0px;     margin-bottom:8px; } /* 链接 */ a {     text-decorat
如何写一段html代码,将百度搜索栏包含到你的页面来?
将百度搜索栏包含到你的页面来:&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;包含百度页面&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;form id=&quot;bdfm&quot; target=&quot;_blank&quot; name=&quot;bdfm&quot; method=&quot;get&quot
css使用背景图片制作搜索框
使用图片制作搜索框 .searchCon { width: 330px; height: 35px; background: url(images/search.jpg) no-repeat; position: relative; } .searchCon input.inputText{ width: 235px; height: 24px; lin
HTML+CSS第四课2:利用表单标签制作一个百度搜索框
知识点:表单&amp;lt;form&amp;gt;标签、&amp;lt;input /&amp;gt;标签的使用。 问题描述:在html中制作一个百度搜索框,要求,在搜索框里输入关键词后,点击搜索,能够跳转到百度搜索结果页面。 关键代码: &amp;lt;form action=&quot;http://www.baidu.com/baidu&quot; target=&quot;_blank&quot;&amp;gt; &amp;lt;input type=&quot;text&quot; n
在导航栏上添加搜索框的问题
自定义一个搜索框添加到导航栏上,  _searchBar = [[ZJBSearchBar alloc]initWithFrame:CGRectMake(7,6, screenSize.width-14,32) withString:@"请输入关键词"];  _searchBar.delegate = self;  UIView * viewd=self.navigati
实现下拉框和搜索框一体功能
页面中实现下拉框和搜索框一体功能 html> html> head lang="en"> meta charset="UTF-8"> title>实现下拉框和搜索框一体功能title> head> body> h4>这个既可以做input 又可以使用 selecth4> div style="position: relative;" class="form-control"> s
input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
转自:http://blog.csdn.net/doguanghan/article/details/69628017?utm_source=itdadao&amp;amp;utm_medium=referral   &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtm...
web搜索框的制作(必应)
前两天没事突然对搜索来了兴趣,我一直在想搜索框中我们输入一些字或者字母,为何下面就会有一些自动补齐的相关搜索,比如我在搜索输入框中输入一个字母e,下面就会出现饿了么,e租宝,ems等相关的搜索链接。然后经过百度,发现原来很多厂商的服务器早已经为我们弄好了。         我们只需要写个输入框,然后获取输入框里的信息,将信息打包,请求服务器,然后获取数据再显示在界面上就OK了。想想是不是很简单呢
html实现搜索框
html> html lang="en"> head> title>Bootstrap模板title> meta charset="UTF-8"> meta name="viewport" content="width=device-width,initial-scale=1"> script type="text/javascript" src
搜索框默认值处理
&amp;lt;input name=&quot;keywords&quot; value=&quot;请输入关键字&quot; onclick=&quot;if(this.value==this.defaultValue){this.value=''}&quot; onblur=&quot;if(this.value==''){this.value=this.defaultValue}&quot; class=&quot;text&quot;/&amp;gt; &amp;lt;input type=&
HTML5-搜索框
代码如下: 很赞?Yes! 简短的几个代码就能实现原本多行JS才能实现的完美交互效果,这就是HTML5略窥一点的赞! placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当input的内容变动时,这个值就消失,它的职责就是给人一种亲和力的指示,十分有爱。 autofocus,顾名思义:自动聚焦,当进入当前页面时,这个input会自动获取焦点,而你可以在打开页面后直接
为你的输入框或者搜索框提供语音输入功能(超酷超装逼超折腾的功能)
如果说你觉得这个功能听起来很酷很炫很刺激很拽,自然就相当难实现,那么我要告诉你,当你看了我的本篇博客之后,你会有种想跳楼的冲动:原来其实这么简单。 但是为了让你多看会,多感受下这种神秘的感觉,我要多说点废话,就是不给你看代码。 现在,我来告诉你吧:     实现起来非常简单,首先你可以新建个html页面,里面把基本代码写好: 添加下面这句: 保存,然后直接用google浏览器打开试试
搜索框 放大镜图标处理
.expert-query{     width:17.86rem;     height: 1.86rem; /*    line-height: 1.86rem;*/     position: relative;     margin: 0.53rem auto 0.48rem; /*    border-bottom: 1px solid #e27719;     paddi
【HTML+CSS】input输入框内添加两个图标
web.jpg 如果input框中有一个图标的情况下可以采取给input设置背景图片的方式实现 input{ background: url(&quot;1.jpg&quot;) no-repeat 20px 20px } 但是,如果一个input里面有左右两个图标的时候这种方式显然就不能实现了,如下图 input添加图片.png 如果想要实现...
html5搜索框
实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。 html5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。
html 搜索框
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;di
HTML5/CSS3/JavaScript实现搜索下拉框和圆角矩形
无聊时写的,实现了一个可搜索的下拉控件和圆角矩形,代码很简单,高手请勿喷。好东西只要一分
如何用HTML5和CSS3做一个站内搜索栏(含select标签)
此搜索栏采用的是表单的一些标签,基本的代码如下: &amp;lt;div id=&quot;search&quot;&amp;gt; &amp;lt;form action=&quot;results.php&quot; method=&quot;post&quot;&amp;gt; &amp;lt;input name=&quot;searchterm&quot; type=&quot;search&quot; placeholder=&quot;站内搜索&quot;&amp;gt;&amp;lt
select框添加搜索框,进行搜索查询
select框中添加搜索框,参照上一个资源,两个资源都引进去就ok
html中怎么定义搜索框?html中search类型?
hello 请输入搜索关键字:
更改搜索框内默认文字字体颜色
设置一个搜索框中默认文字为“搜索”
仿淘宝搜索框 -- 输入内容隐藏默认文本
在线演示html:<div id="search"> <input type="text" id="txt"> <label for="txt" id="message">必败的国际大牌</label> <button>搜索</button> </div>css:<style> input, button { /*去除默认样式*/ border: n
百度搜索框html代码
百度搜索框html代码,一个很好的搜索框实例
网站加入Google搜索功能 嵌入Google搜索
转自:http://67566894.iteye.com/blog/657964 给自己的网站加一个搜索功能很简单,代码如下: 欢迎访问我的博客:http://67566894.iteye.com/ Java代码  "http://www.google.com/search" method="get">       "ie" value="UTF-8" type="hi
html css 模仿小米官网搜索框
代码:                 body         {             margin:0 auto;             padding:0;             }         #search         {             border:1px solid #dfdfdf;             height
页面搜索框--在页面内实现导航
写这个功能的时候,细节方面比较讲究,稍微不注意点页面就会出现各种不适. 先看一看效果: 当我在输入框中输入一个字符,后面就会出现相应的内容。直接点击我们就可以链接到相应的文档区域非常适合站内搜索和导航。 下面我摆出完整的测试代码.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Doc
HTML+CSS第八课2:利用DIV+CSS制作一个百度搜索框和按钮的无缝对接
知识点:盒子模型、CSS样式设置、form表单。 网页效果要求: 制作思路: 1、将百度logo+搜索框+按钮,作为整体放在一个div盒子里,通过设置div来控制他们在网页中的位置 2、涉及到表单,所以写一个form标签,将他们放在form标签中 3、搜索功能的实现,参考资料:利用表单标签制作一个百度搜索框 4、搜索框和按钮的样式,设置css属性,控制宽高、边框、背景颜色、文本颜色等 ...
select下拉框添加搜索功能
引入css <link href="/select2/4.0.5/css/select2.min.css" rel="stylesheet">引入js依赖于jquery.js<script src="/select2/4.0.5/js/select2.full.min.js"></script>在select的class写入select2<select id="xx" class="selectp
如何去掉 Chrome 新标签页里的搜索框
http://www.appinn.com/how-to-remove-new-chrome-search-box/
带搜索框的百度地图html
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;} #l-map{height:300px;width:100%;} #r-result{width:100%;} 关键字输入提示词条 请输入: // 百度地图API功能 function G(id)
HTML设置input搜索框onfocus样式
input搜索框onfocus设置圆角边框样式 html: css: #middle1-search{ height: 32px; width: 596px; position: absolute; right:202px; border-radius: 30px; font-size: 14px; color: rgb(153,153,153); backgr
在导航栏添加搜索框
//导航条的搜索条         UISearchBar *searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(500.0f,0.0f,250.0f,44.0f)];         searchBar.delegate = self;         [searchBar setPlaceholder:@"搜索"];
html重写搜索框的按钮
hello
添加 搜索 HTML
html> html> head lang="en"> meta charset="UTF-8"> title>张凯title> style> *{ margin: 0 auto; background-color: aqua; } input{ back
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 人工智能学习的东西 java培训的东西记不住