效果图：

代码：

<!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. 学到了林海峰,武沛齐讲的Day20 装饰器

    import time def timmer(func): #func=test 装饰器架构 def wrapper(): start_time=time.time() func() #就是在运行te ...

  2. redis默认端口6379以其名命名,是我孤陋寡闻了,是名性感美女(梅尔兹)

    阿莱西亚-梅尔兹Alessia Merz ,这位亚平宁半岛的性感女人,自从结婚之后就逐渐的淡出了人们的实现,曾经的尤文教母已经现在已经是两个孩子的母亲,但是最近的梅尔兹开始蠢蠢欲动,在相夫教子的同时, ...

  3. PostgreSQL、Greenplum 日常监控 和 维护任务

    背景 Greenplum的日常监控点.评判标准,日常维护任务. 展示图层 由于一台主机可能跑多个实例,建议分层展示. 另外,即使是ON ECS虚拟机(一个虚拟机一个实例一对一的形态)的产品形态,实际上 ...

  4. [转]Linux下的常见信号总结

    转自 https://www.cnblogs.com/gaorong/p/6430905.html 在linux下有很多信号,按可靠性分为可靠信号和非可靠信号,按时间分为实时信号和非实时信号,linu ...

  5. Cogs 2221. [SDOI2016 Round1] 数字配对(二分图)

    [SDOI2016 Round1] 数字配对 ★★★ 输入文件:menci_pair.in 输出文件:menci_pair.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 有 ...

  6. linux系列（二）：cd命令

    1.命令格式: cd [目录名] 2.命令功能: 切换当前目录至目录名目录 3.常用实例 (1).进入系统根目录 命令: cd / 输出: felix@felix-computer:~/软件$ cd ...

  7. Linux下基于Xampp的TestLink的安装部署

    由于项目需要,故需要搭建Testlink,且出于稳定,考虑在linux环境部署,当然windows系统也是可以的. 系统:64位操作系统 linux:centos6.8 testlink:1.9.14 ...

  8. java关于Integer设置-128到127的静态缓存

    今天在一个java群里,看到有个群友问到如下为什么第一个为true,第二个为false. System.out.println(Integer.valueOf("50")==Int ...

  9. 深入理解JVM虚拟机9：JVM监控工具与诊断实践

    转自https://juejin.im/post/59e6c1f26fb9a0451c397a8c jvm优化必知系列——监控工具 微信公众号[Java技术江湖]一位阿里 Java 工程师的技术小站. ...

  10. CodeForces - 1175D Array Splitting（数组划分+后缀和+贪心）

    You are given an array a1,a2,…,ana1,a2,…,an and an integer kk. You are asked to divide this array in ...