[css3]搜索框focus时变长


结构:
<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时变长的更多相关文章
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失
开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...
- 好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...
- css3 jQuery实现3d搜索框+为空推断
<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- CSS3实现的苹果网站搜索框效果
在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- Android 根据EditText搜索框ListView动态显示数据
根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...
- Android 依据EditText搜索框ListView动态显示数据
依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...
随机推荐
- [转载] 一共81个,开源大数据处理工具汇总(下),包括日志收集系统/集群管理/RPC等
原文: http://www.36dsj.com/archives/25042 接上一部分:一共81个,开源大数据处理工具汇总(上),第二部分主要收集整理的内容主要有日志收集系统.消息系统.分布式服务 ...
- thinkphp分页效果的制作,按查询条件分页正确做法
PHP代码: <?php namespace Home\Controller; use Think\Controller; use Home\Clas\Cate; class IndexCont ...
- 【CDN】国外访问国内服务器网站-响应慢-CDN
建议采用CDN海外加速方式: (1)CDN即内容分发网络(Content Delievery Network),它可以认为是建立在现有IP网络基础结构之上的一种增值网络.CDN技术将多点负载均衡.镜像 ...
- 对List里的对象元素进行排序
public class Student { private int studentId; private String studentName; private int age; public St ...
- Android_开发工具的下载和开发环境的搭建
一.Android开发工具的下载 Android开发者官网: http://developer.android.com/ Android开发工具:http://www.andro ...
- The Zen Programmer (zhuan)
http://blog.csdn.NET/marksinoberg/article/details/52460725 ***************************************** ...
- 安卓虚拟机启动失败intel haxm未安装
1:环境是android studio 在AVD中启动显示,提示当前电脑为安装HAXM emulator: ERROR: x86 emulation currently requires hardwa ...
- 七大查找算法(附C语言代码实现)
来自:Poll的笔记 - 博客园 链接:http://www.cnblogs.com/maybe2030/p/4715035.html 阅读目录 1.顺序查找 2.二分查找 3.插值查找 4.斐波那契 ...
- 使用Beanstalkd实现队列
Beanstalkd可以想象成缓存当中的memcahe或者redise,将我们的队列任务放到内存中进行管理. 运行环境是在linux中,反正我的windows中没运行成功.../(ㄒoㄒ)/~~ 首先 ...
- jmeter 远程测试
如果你的JMeter客户机不能进行属性,来模拟 足够的用户强调您的服务器或在网络水平是有限的,存在一个选项来控制多个远程JMeter 引擎从一个JMeter客户机. 通过运行JMeter远程,你可以复 ...