效果图：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>可伸缩搜索框demo</title>

    </head>

    <body>

    <style type="text/css">

        .search-input{

                background: #ededed url(

                    http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px;

                padding: 8px 5px 8px 32px;

                width: 100px;

                border-radius: 18px;

                color: #ccc; 

                outline: none;

                overflow:hidden;

                border-radius: 18px; 

                border: 1px solid #ddd;

                -moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);

                -webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);

                box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);

                -webkit-transition: all .3s;

                -moz-transition: all .3s;

                -o-transition: all .3s;

        }

        .search-input:hover, .search-input:focus {

            border-color: #fff;

            color: #444;

            width: 200px;

        }

    </style>

    <div class="search-mb">

        <input class="search-input" type="text" value="请输入搜索内容..." onblur="if(this.value=='') value='请输入搜索内容...';" onclick="if(this.value=='请输入搜索内容...')value='';"/>

    </div>

    </body>

</html>

css实现可伸缩的搜索框的更多相关文章

  1. Qt 搜索框

    一.前言 用户需要输入文本时,可使用QLineEdit控件进行编辑输入,缺点是样式相对单一. 在使用百度搜索输入框时,发觉比较人性化,故采用QLineEdt+QPushButton通过css样式实现自 ...

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

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

  3. HTML/CSS实现的搜索框

    谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿.简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪 ...

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

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

  5. weui 搜索框

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

  6. 用jsonp实现搜索框功能

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

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

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

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

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

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

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

随机推荐

  1. AcWing P164 可达性统计 题解

    Analysis 这道题我一开始想到的是传递闭包,但是时间复杂度是n³,也开不下30000*30000的数组,所以我想到了拓扑+状态压缩(bitset),从后往前找,把能到达的点能到哪里用位运算赋到上 ...

  2. dumpe/dumpe2fs/e2fsck

    xt2/3/4文件系统备份工具 导出ext2/ext3/ext4文件系统信息 dumpe2fs e2fsck 强制检查文件系统 检查文件系统

  3. 主席树K-th Number

    /*K-th NumberTime Limit: 20000MS Memory Limit: 65536KTotal Submissions: 44535 Accepted: 14779Case Ti ...

  4. 代码 | 用ALNS框架求解一个TSP问题 - 代码详解

    写在前面 前面好多篇文章,我们总算是把整个ALNS的代码框架给大家说明白了.不知道大家对整个框架了解了没有.不过打铁要趁热,心急了要吃热豆腐.今天就来实战一下,教大家怎么用ALNS的代码框架,求解一个 ...

  5. yii2.0 模块的使用

    以高级模板为例 1.复制目录 frontend或backend 为一个新目录pro修改advanced\common\config\bootstrap.php 添加一行,加载刚才的路劲Yii::set ...

  6. LOJ#2977. 「THUSCH 2017」巧克力(斯坦纳树+随机化)

    题目 题目 做法 考虑部分数据(颜色较少)的: 二分中位数\(mid\),将\(v[i]=1000+(v[i]>mid)\) 具体二分操作:然后求出包含\(K\)种颜色的联通快最小的权值和,判断 ...

  7. C++标准库分析总结(一)

    之前学习过标准库,最近身边有人问到相关话题,故在此做一个总结 1 标准库介绍 C++标准库:C++ Standard Library C++标准模板库:Standard Template Librar ...

  8. 小程序tab切换代码

    <!--index.wxml--> <view class="container"> <view class="navtap" & ...

  9. MAC将根目录文件夹的权限赋给用户

    https://my.oschina.net/liujiest/blog/762004 1.sudu -i进入root模式(需输入密码) 2.chown -R 用户名 /文件夹名 sudo -i Pa ...

  10. chrome浏览器备忘

    记录日常使用Chrome遇到的问题. audio控件播放音频问题 打开http://www.cdfive.com,发现音乐没有自动播放,F12打开控制台发现有如下报错: Uncaught (in pr ...