[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 ...
随机推荐
- hibernate对象关系实现(四)继承实现
继承实现方式分为三种:subclass; joined-subclass;union-subclass a.类中体现 b.库中体现分为三种: b.1:一种方式:人和学生公用一张表,添加一个辨别字段 ...
- ORACLE性能优化之SQL语句优化
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 操作环境:AIX +11g+PLSQL 包含以下内容: 1. SQL语句执行过程 2. 优化器及执行计划 3. 合 ...
- Java源码初学_HashSet&LinkedHashSet
一.概述 HashSet是建立在HashMap的基础上的,其内部存在指向一个HashMap对象的引用,操作HashSet实际上就是操作HashMap,而HashMap中所有键的值都指向一个叫做Dumm ...
- count-the-repetitions
https://leetcode.com/problems/count-the-repetitions/ 下面是我的方法,结果对的,超时了... package com.company; class ...
- FragmentPagerAdapter与FragmentStatePagerAdapter区别
在一个 Android 应用中,我使用 FragmentPagerAdapter 来处理多 Fragment 页面的横向滑动.不过我碰到了一个问题,即当 Fragment 对应的数据集发生改变时,我希 ...
- STM32学习笔记(三) STM32的GPIO的深入学习
STM32的开发学习主要涉及软硬件两个部分的实现,包含众多外设和总线的理解配置.STM32的整个学习曲线并不陡峭,但入门却相当困难,因此在学习之初,多动手实验和测试相当重要,GPIO作为整个STM32 ...
- Javascript模块化编程(一):模块的写法 (转载 学习中。。。。)
转载地址:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 阮一峰 大神:http://www.ruanyifeng.com/ ...
- SVN使用汇总
SVN项目管理文件夹:Tag/Branch/Trunk Trunk:在我经历的开发中,新建Trunk意味着对旧Trunk的一个保留,同时在新的Trunk中可以进行新功能的开发及对已有功能进行完善: B ...
- JAVA的extends用法
理解继承是理解面向对象程序设计的关键.在Java中,通过关键字extends继承一个已有的类,被继承的类称为父类(超类,基类),新的类称为子类(派生类).在Java中不允许多继承.(1)继承 clas ...
- Machine Learning - 第5周(Neural Networks: Learning)
The Neural Network is one of the most powerful learning algorithms (when a linear classifier doesn't ...