谷歌和百度首页的搜索框都是<input>+<button>模式的，bing的搜索框感觉要好点儿。简言之，就是将提交按钮放到<input>中，其实这是做不到的，只能伪装。
​1. [代码]主要源代码     
<html>
  
<head>
<title>掬一捧|搜索框的实现</title>
<meta charset="UTF-8">
<style type="text/css">
<!--
body {
    font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size:14px;
}
 
h1 {
    margin-top:0px;
    margin-bottom:8px;
}
 
/* 链接 */
a {
    text-decoration:none;
    color:#1c00ff;
}
 
a:hover {
    color:#5f00e4;
}
fieldset.search {
    padding: 0px;
    border: none;
    width: 232px;
    background:#e0e0e0;
}
 
fieldset.search:hover {
    background: #a8a8a8;
}
.search input, .search button {
    border: none;
    float: left;
}
.search input.box {
    height: 28px;
    width: 200;
    margin-right: 0px;
    padding-right: 0px;
    background: #e0e0e0;
    margin: 1px;
}
.search input.box:focus {
    background: #e8e8e8 ;
    outline: none;
}
.search button.btn {
    border: none;
    width: 28px;
    height: 28px;
    margin: 0px auto;
    margin: 1px;
    background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
}http://www.huiyi8.com/hunsha/chuangyi/​
.search button.btn:hover {创意婚纱照片
    background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
}
 
/* 文章样式 */
.article {
 
}
-->
</style>
</head>
<body>
<div>
<h2>搜索框</h2>
<form method="get" id="searchform" action="http://blog.iliyang.cn/">
    <fieldset class="search">
         <input type="text" class="box" name="s" id="s" class="inputText" placeholder="掬一捧" x-webkit-speech>
          <button class="btn" title="SEARCH"> </button>
    </fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>
​

HTML/CSS实现的搜索框的更多相关文章

  1. 图片轮播（bootstrap）与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. css实现可伸缩的搜索框

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  3. 好看css搜索框样式_分享8款纯CSS搜索框

    最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...

  4. weui 搜索框

    点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...

  5. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

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

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

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

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

  8. 使用jquery实现搜索框的位置变换

    现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...

  9. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...

随机推荐

  1. 【剑指Offer学习】【面试题37：两个链表的第一个公共结点】

    题目:输入两个链表,找出它们的第一个公共结点. 链表结点定义 /** * 链表结点类 */ private static class ListNode { int val; ListNode next ...

  2. UNP学习笔记（第十六章 非阻塞I/O）

    套接字的默认状态时阻塞的 可能阻塞的套接字调用可分为以下4类: 1.输入操作,包括read.readv.recv.recvfrom和recvmsg. 2.输入操作,包括write.writev.sen ...

  3. win7 iis6怎么部署.net网站

    win7 iis6怎么部署.net网站,把本机当成网站服务器来简单介绍. 方法/步骤 1 首先在本机有一个可以正常运行的网站.比如vs2010中有一个网站项目,网站项目运行后正常. 2 打开iis6, ...

  4. Axure教程：滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  5. spring-struts-mybatis整合错误集锦

    尽管三大框架特别特别的好用,可是,当我第一次把这三个框架用maven整合到一起的时候.各种错误接踵而至,以下来做一下三大框架整合的总结: 首先是在导入三大框架的各种依赖包的时候,由于我用的是j2ee  ...

  6. java面试笔记（2019）

    1. 堆啊,栈啊,内存溢出原因 2. Dubbo原理 3. Reids线程 4. 线程池安全 5. linux查看线程命令 6. ABA

  7. 自己定义ProgressDialog载入图片

    使用系统载入框 mDialog = new ProgressDialog(this); mDialog.setCancelable(true);//能否够被取消 mDialog.setMessage( ...

  8. Linux kernel manpages

    https://www.linuxquestions.org/questions/linux-newbie-8/man-pages-for-kernel-functions-758389/ 在Linu ...

  9. 【C/C++】高亮C++中函数的重写——函数名相同？参数列表相同？返回值相同？

    C++的重载给人留下了非常深刻的影响,原因是重载的条件很值得注意:函数名相同,参数列表不相同的两个函数构成重载函数,而无关乎二者的返回值. 但是C++中的函数重写又是另一码事.标准规定:只要函数名相同 ...

  10. Linux 文件系统IO性能优化

    对于LINUX SA来说,服务器性能是需要我们特别关注的,包括CPU.IO.内存等等系统的优化变得至关重要,这里转载一篇非常不错的关于IO优化的文章,供大家参考和学习: 一.关于页面缓存的信息,可以用 ...