结构：

<form class="demo-a">
    <input placeholder="Search" type="search">
</form>

关键样式：

.demo-a input{width: 15px; border-radius: 10em; transition: all 0.5s ease 0s;}

.demo-a input:focus{width: 130px; box-shadow: 0 0 5px rgba(109,207,246,.5);}

[css3]搜索框focus时变长的更多相关文章

  1. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

  2. 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失

    开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...

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

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

  4. css3 jQuery实现3d搜索框+为空推断

    <!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...

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

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

  6. CSS3实现的苹果网站搜索框效果

    在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.

  7. 自定义webkit搜索框样式

    好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...

  8. Android 根据EditText搜索框ListView动态显示数据

    根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...

  9. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...

随机推荐

  1. iOS - UIAlertView

    前言 NS_CLASS_DEPRECATED_IOS(2_0, 9_0, "UIAlertView is deprecated. Use UIAlertController with a p ...

  2. 对sizeof的思考

    一.sizeof的特点(与strlen比较) 1.sizeof是运算符,strlen是函数,这意味着编译程序在编译的时候就把sizeof计算过了,所以sizeof(x)可以用来定义数组维数. 例如 i ...

  3. (三)stm32之串口通信DMA传输完成中断

    一.DMA功能简介 首先唠叨一下DMA的基本概念,DMA的出现大大减轻了CPU的工作量.在硬件系统中,主要由CPU(内核).外设.内存(SRAM).总线等结构组成,数据经常要在内存和外设之间,外设和外 ...

  4. mysql报关于用户密码1045(28000)，几种处理方法 (zhuan)

    http://blog.itpub.net/29371470/viewspace-1409075/ http://blog.csdn.net/rosten/article/details/250658 ...

  5. Axure_元件库

    1.百度“推荐”,看到一篇文章“用Axure制作Material Design的APP原型(附元件库下载)” 想到 可以搜索 类似“axure 元件库”的关键字,来看看有哪些现成的元件库 2.

  6. python操作mongodb之五大量写操作

    import pymongo #库名 db = pymongo.MongoClient('192.168.30.252',27017).bulk_example #test集合插入 db.test.i ...

  7. ArcGIS发布地图服务

    一般做完矢量图绘制工作后,生成的.mxd文件只能在ArcMap中查看,为了方便用户进行浏览,我们需要发布地图服务. 目前为止最常用的就是在ArcGIS中发布地图服务. 今天也算是在做“发布地图服务”的 ...

  8. js判断是不是chrome浏览器

    方法一: var isChrome = window.navigator.userAgent.indexOf("Chrome"); <script> var isChr ...

  9. java的HashMap与ConcurrentHashMap

    好像今天没有什么源码读,那么就来看看java的这两种HashMap有啥不一样的地方吧,在这之前先普及一下HashMap的一些基本知识: (1)放入HashMap的元素是key-value对. (2)底 ...

  10. ubuntu14 eclipse luna 无法显示菜单 ， 解决方案

    使用命令行 , 输入 Exec=env UBUNTU_MENUPROXY=0 <eclipse的安装路径>/eclipse 就可以了 或者建立一个Eclipse的快捷方式,eclipse. ...