<!DOCTYPE html>

<html>

<head>

<title>css3实现3d搜索框</title>

<style>

 body{background: #eee; font: 12px 'Lucida sans', Arial, Helvetica; color: #333; text-align: center;} a{color: #2A679F;} .form-wrapper{width: 450px; padding: 8px; margin: 100px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede
#bababa #aaa #bababa; -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; box-shadow: 0 3px 3px rgba(255,255,255,.1), 0
3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); background-image:
-webkit-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8); background-image: linear-gradient(top,
#f6f6f6, #eae8e8);} .form-wrapper #search{width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -webkit-box-shadow:
0 1px 1px #ddd inset, 0 1px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} .form-wrapper #search:focus{outline: 0; border-color: #aaa; -moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset;} .form-wrapper #search::-webkit-input-placeholder{color: #999; font-weight: normal;} .form-wrapper #search:-moz-placeholder{color: #999; font-weight: normal;} .form-wrapper #search:-ms-input-placeholder{color:
#999; font-weight: normal;} .form-wrapper #submit{float: right; border: 1px solid #00748f; height: 42px; width: 100px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; background-image:
-webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3,
#0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow:
0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;} .form-wrapper #submit:hover, .form-wrapper #submit:focus{background-color:
#31b2c3; background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3)); background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3); background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); background-image: -ms-linear-gradient(top,
#0483a0, #31b2c3); background-image: -o-linear-gradient(top, #0483a0, #31b2c3); background-image: linear-gradient(top, #0483a0, #31b2c3);} .form-wrapper #submit:active{outline: 0; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px
4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;} .form-wrapper #submit::-moz-focus-inner{border: 0;}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<form class="form-wrapper">

<input type="text" id="search" placeholder="Search for CSS3, HTML5, jQuery ..." required>

<input type="submit" value="go" id="submit">

</form>

<script src="/ajaxjs/jquery.1.7.2.min.js"></script>

<div style="text-align:center;clear:both">

<p>假设右下角提示JS错误，请刷新一下页面就可以</p>

</div>

</body>

</html>

css3 jQuery实现3d搜索框+为空推断的更多相关文章

  1. 7款基于jquery的动画搜索框

    无论是电商网站,还是媒体网,还是个人博客,每个网站都有属于自己个性化的搜索框.今天小编给大家带来7款基于jquery的动画搜索框.每个搜索框都采用了动画效果,一起看下效果图吧. 在线预览   源码下载 ...

  2. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  3. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

  4. jquery+ajax 实现搜索框提示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  6. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  7. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  8. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  9. ajax+JQuery实现类似百度智能搜索框

    最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先 ...

随机推荐

  1. 国内 docker 仓库镜像对比

    http://www.datastart.cn/tech/2016/09/28/docker-mirror.html

  2. Matlab绘图时横坐标重叠怎么办

    如横坐标重叠了,咋回事?蛋疼. 后来发现plot里已经横坐标1到50了,我又写了个 set(gca,'XTick',1:1:50);没写XTickLabel,后来我把XTick注视了就好了.

  3. xcode 6 exporting ipa 提示 Your account already has a valid iOS distribution certificate

    在Product - Archive 包过程中,选择Save for Ad hoc Deployment模式[给内部人员测试],export包时,弹出了如下提示 自己遇到时候问题:首先adhoc需要本 ...

  4. 使用ASIHTTPRequest 编译提示找不到"libxml/HTMLparser.h"的解决方法

    使用ASIHTTPRequest xcode编译提示找不到"libxml/HTMLparser.h",解决方法如下: 1>.在xcode中左边选中项目的root节点,在中间编 ...

  5. 谈谈 ES7、ES8、ES9 和 Stage 3 的那些事儿

    ES6 作为多年来 JavaScript 的重大版本变革,受到 JavaScript 开发者们的普遍欢迎. 也正是从 ES6 (ES2015) 开始,JavaScript 版本发布变为年更,即每年发布 ...

  6. 资源相互引用时 需添加 PerformSubstitution=True

    获取或设置一个布尔值,该值确定在对由 WebResourceAttribute 类引用的嵌入式资源的处理过程中是否分析其他 Web 资源 URL,并用到该资源的完整路径替换. 如:一个CSS文件引用其 ...

  7. ARCGIS FLEX API加载google地图、百度地图、天地图（转）

    http://www.cnblogs.com/chenyuming507950417/ Flex加载google地图.百度地图以及天地图作底图 一  Flex加载Google地图作底图 (1)帮助类G ...

  8. domino数据同步到sql server

          近期有个需求,要同步domino数据到selservlet数据库,查看几年前ls使用odbc写的同步功能,还能正常使用.而且加入读者域进去功能(之前没有这个需求).改进成网页配置版本号(曾 ...

  9. Maven够用就好

    学习maven.仅仅要知道pom.dependency.coordination就能够了,剩下的就是学习一个一个的plugin的Goal 配置maven 下载    http://maven.apac ...

  10. VM虚拟机 Windows虚拟机中linux鼠标不能动怎么办

    有一次vmware安装red hat linux后,进入x-windows界面,鼠标不能用,百思不得其解,因为自己的安装linux的过程中设置绝对是没有问题的啊,鼠标设置肯定是usb带滑轮,这个肯定没 ...