结构:

<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. 关于Java函数传参以及参数在函数内部改变的问题——JAVA值传递与引用最浅显的说明!

    看了很多关于阐述JAVA传参到底是值传递还是引用的问题,有些说得很肤浅让人感觉似懂非懂的感觉,但是好像又能解决一些问题,然后就止步了.还有一些则是,讲得很深奥,看着好像很有道理的样子,但是其实还是没怎 ...

  2. Android设置Activity启动和退出时的动画

    业务开发时遇到的一个小特技,要求实现Activity启动时自下向上弹出,退出时自上向下退出. 此处不关注启动和退出时其他Activity的动画效果,实现方法有两种: 1.代码方式,通过Activity ...

  3. a++累加

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  4. 开启所有PHP错误!无论在任何时候

    开发的时候,会屏蔽所有错误,但是有时候排查太蛋疼, 下面代码粘贴到控制器头部,开所有错误! 不可阻挡   ini_set('display_errors','1'); restore_error_ha ...

  5. 转:Eric Lippert:阅读代码真的很难

    转自:http://blog.jobbole.com/438/ 相关文章 微软资深软件工程师:阅读代码真的很难(第2篇) 阅读优秀代码是提高开发人员修为的一种捷径 学会阅读源代码 如何阅读大型代码库? ...

  6. 删除github账号的方法

    如果你不想使用自己的github账号了,github官网允许你删除账号,具体操作步骤为: 1.登录github网站,网站右上角的头像,在下拉菜单中选择"Settings"(设置): ...

  7. c++ 对象内存分配和虚函数

    1. c++类对象(不含虚函数)在内存中的分布 c++类中有四种成员:静态数据.非静态数据.静态函数.非静态函数. 1. 非静态数据成员放在每个对象内部,作为对象专有的数据成员 2. 静态数据成员被抽 ...

  8. 运行最快的安卓模拟器VirtualBox安装教程

    网上有多种多样的安卓模拟器,蓝手指啊,百度的MTC等等,但是他们的运行速度,与电脑的切合度都没有VirtualBox安装Android-X86结合在一起来的快. 工具/原料 电脑一台 网络 方法/步骤 ...

  9. RemoteWebDriver管理

    直接贴代码: @Parameters({"BrowserType","NodeIP","NodePort"}) public void be ...

  10. SAP标准价格修改

    标准MR21修改前期的价格,不会影响到当期. 相关配置 事务码OMRN. 如企业账期已经开到 2015 年 2 月,会计账期还可对 1月记账,配置后可修改1月物料价格.