结构：

<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. Data Science 和 Finance 两个领域的融合是什么样子的？

    Data Science 和 Finance 两个领域的融合是什么样子的? 2015-05-24 董可人 现在大部分人所说的Quant一般是指各大投行里做衍生品定价,信用评估,风险控制之类工作的人,这 ...

  2. linux虚拟机安装

    1.真实机第一次安装必须先搞f2进入boot从光盘启动,虚拟机不用 进入的时候五个选项Install or upgrade an existing system:安装或升级现有系统Install sy ...

  3. xutils使用过程

    1,导入xutils的jar包 2,添加xutils需要使用的权限 <uses-permission android:name="android.permission.INTERNET ...

  4. VideoView

    [1]这个控件就是对surfaceview 和 meidiaplayer进行封装 [2]meidiaplayer 播放视频他只支持 3gp MP4格式    

  5. epoll函数与参数总结学习 & errno的线程安全

    select/poll被监视的文件描述符数目非常大时要O(n)效率很低:epoll与旧的 select 和 poll 系统调用完成操作所需 O(n) 不同, epoll能在O(1)时间内完成操作,所以 ...

  6. 1 HTML

    1 HTML 基础知识 软件的结构:    C/S(Client  Server)结构的软件: 比如: QQ. 极品飞车. 飞信 . 迅雷      cs结构的软件的缺点:更新的时候需要用户下载更新包 ...

  7. goLang文件遍历

    package main import (  "fmt"  "io/ioutil"  "os"  "path/filepath&q ...

  8. HTML标签的默认样式

    body    有默认的内外边距(margin:0;padding:0); p         有默认的外边距(margin:0;)

  9. Windows BAT文件使用技巧[转载]

    首先,批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命令行一样),你可以使用DOS下的Edit或者Windows的记事本(notepad)等任 ...

  10. hiho1096_divided_product

    题目 给出两个正整数N和M, N <= 100, M <= 50, 可以将N分解成若干个不相等的正整数A1, A2... Ak的和,且A1, A2 ... Ak的乘积为M的倍数.即 N = ...