常见input输入框 点击 发光白色外阴影 focus
2015-06-24 14:59
393 查看
先看看具体实现的效果 第一就是点击input 实现的效果 默认谷歌点击input是蓝色边框 去掉用outline:0; 实现效果用focus 默认状态的边框颜色一般较重 如border:1px solid #d8d8d8 ; 背景色background:#fcfcfc; 还有边角圆形border-radus:0.35em;
focus点击给一个阴影 box-shadow ; border background都是白色
input:focus{outline:0; box-shadow:0 0 5px #ccc; border-color:#fff; background:#fff;}
![](http://images0.cnblogs.com/blog2015/650827/201506/241453118143034.png)
实例
CSS
focus点击给一个阴影 box-shadow ; border background都是白色
input:focus{outline:0; box-shadow:0 0 5px #ccc; border-color:#fff; background:#fff;}
![](http://images0.cnblogs.com/blog2015/650827/201506/241453118143034.png)
实例
<p class="field"> <input id="name" name="name" type="text" placeholder="用户名" class="user-name"></p>
CSS
.field input{ width: 85%; height: 2.5em;//input高度 margin-top: 2%; border: 1px solid #d8d8d8; background: #fcfcfc; line-height: 2em; border-radius:0.45em; } /*鼠标点中input*/ .field input:focus{ -webkit-box-shadow: 0 0 5px #ccc;/*点击input 外阴影*/ -moz-box-shadow:0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border-color:#fff ;/*黑色边框改为白色*/ outline:0;/*去掉默认谷歌点击input边框显示蓝色 */ background: #fff;/*input内背景为白色*/ }
相关文章推荐
- mysql开启日志sql语句
- pomelo学习一:环境配置、新建项目、WebStorm的安装和配置
- VC++图像处理软件
- sql 根据状态自定义排序
- 【数据结构】队列
- [SoapUI] UrlEncode编码/UrlDecode解码网站
- wdcp的环境搭建shell脚本分析--lanmp.sh
- 解密回声消除技术
- ActionResult,PartialViewResult,EmptyResult,ContentResult
- 数据结构基础(6)--递归和函数调用--汉诺塔问题C语言实现
- AFNetworking 2.0
- Android29_Loader
- 无病呻吟
- hql查找为空的字段
- menu-代码添加以及add方法参数意义
- 尚学堂Spring视频教程(二):Spring控制反转
- 关于控制器
- MD5数字签名
- navicat导入.sql文件出错 2006 - MySQL server has gone away
- 子进程自父进程继承什么或未继承什么