谷歌和百度首页的搜索框都是<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. TCP/IP详解 卷一（第三章 IP：网际协议）

    IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP及IGMP数据都以IP数据报格式传输. IP提供不可靠.无连接的数据报传送服务. 1.不可靠:就是它不能保证IP数据报能成功地到 ...

  2. 登陆界面综合实例+spinner下拉列表框详解

      点击确定: 点击修改:     想到Spinner下拉按钮可以通过两种方法生成 方法一: 1.在array数组里面定义数组 代码如下: <resources> <st <? ...

  3. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  4. NGINX下如何自定义404页面

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  5. Django之便签生成

    myblog_tag.py #coding:utf-8 __author__ = 'similarface'from django import template register=template. ...

  6. 根据URL发起HTTP请求，我的HTTPHelper。

     完整的demo using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  7. 相机标准之onvif---开放型网络视频接口论坛onvif 简介

    什么是ONVIF ? ONVIF:原意为 开放型网络视频接口论坛,即 Open Network Video Interface Forum ,是安讯士.博世.索尼等三家公司在2008年共同成立的一个国 ...

  8. 【Unity 3D】学习笔记三十：游戏元素——游戏地形

    游戏地形 在游戏的世界中,必然会有非常多丰富多彩的游戏元素融合当中. 它们种类繁多.作用也不大同样.一般对于游戏元素可分为两种:经经常使用.不经经常使用.经常使用的元素是游戏中比較重要的元素.一般须要 ...

  9. vs中使用M_PI的问题及解决 角度转弧度&根据弧度计算圆周上点的坐标的方法

    M_PI 是一个宏定义,圆周率的定义           C/C++ code #define M_PI 3.14159265358979323846 此宏定义和编译器有关,TC中M_PI宏就定义在& ...

  10. ios -- 极光推送《1》

    昨天公司项目要加入远程推送功能,自己做显然会很麻烦,所以用了极光的远程推送,下面我会讲如何制作推送证书并使用极光推送进行远程推送. 先讲讲怎么下载推送证书吧(前面的很简单要是知道的可以直接往下滑,简书 ...