html搜索框实现及IE浏览器的兼容性

<html>
<head>
<!--如下的meta 表示浏览器的文档模式 以最新版的IE模式   兼容性解决-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>soso</title>
</head>

<style type="text/css">

<span style="white-space:pre">	</span>body{ background-color:#333; margin:0 auto;}

   .div{ background-image:url(DSC00004.JPG); height:690px; width:1228px; margin:0 auto;}
   
   form{ float:left; background-color:#fff; padding:5px;}
  
  .submit{ border:none; background-image:url(ss.jpg); height:29px; width:29px; float:left;}
  
  .text{border:none; float:left; height:27px; width:250px; outline:none; line-height:29px; font-size:18px;}
  
   /*定位*/
  .box{position:absolute; left:400px; top:200px;}
</style>
<body>

<div class="div">
    <div class="box">
        <form>
         <input type="text"  class="text"/> <input type="submit" class="submit" value=""/>
        </form>
        </div>
</div>
</body>
</html>
时间: 2024-10-11 12:51:44

html搜索框实现及IE浏览器的兼容性的相关文章

通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoContent");//获取到input搜索框 var vlue=$.cookie('plhder');//获取cookie值 til.attr('placeholder',vlue);//把获取到的cookie值attr到搜索框中 $("#orderInfoSelectIndex opti

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>

【html】【21】高级篇--搜索框

下载: http://www.xwcms.net/js/bddm/25368.html 代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"

做一个input搜索框

首先我先抛出制作这个搜索框的细节: 1)文本输入框要有内阴影. 2)文本框与按钮要对齐. 好,我们现在开始制作,先说一下,最直接的制作方法,文本输入框的内阴影我们可以用图片来做,用几像素的图片平铺,然后一个DIV层内包含input与button两个标签,大致HTML标签书写如: 1 2 3 4 5 6 <div id="search-field"> <form id="search-form">     <input type=&quo

使用jquery+ajax+php实现搜索框的功能

搜索框的原理: 客户端:输入要搜索的关键字于文本框,然后文本框将关键字获取,使用ajax发送请求到服务端,然后根据服务端返回来的信息显示到一个div中 服务端:接收传过来的数据,然后在数据库中搜索,再返回数据给客户端 首先是客户端 新建一个输入框 <input type="text" id="keyword" name="keyword" /> 在输入框的下面创建一个div,先让他隐藏起来 <div id="searc

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

一个搜索框的背后

要想做好一个让用户喜欢的搜索功能太难了. 首先,不说界面兼容问题,假设在IE6+.FF.Chrome.Safari.Opera等浏览器下显示正常,不出现错位,字体和搜索框距离大小不一等问题. 您所使用的或者开发的搜索功能包含以下几点呢? 1)进入首页,光标默认在搜索框内.光标离开搜索框,搜索框内显示“请输入关键词”等. 2)当不输入任何关键词,点击搜索仍然会停留在当前页.这里不建议弹出对话框的方式提示用户“请输入关键字”等字样. 3)输入关键词,出现关键词模糊匹配提示下拉框,其中模糊匹配包括英文

Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)

简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void addAction(QAction * action, ActionPosition position) 在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位. QAction * addAction(const QIcon & icon, ActionPosition