标签：
先看看具体实现的效果 第一就是点击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;}
实例
<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内背景为白色*/
}
标签：
原文地址：http://www.cnblogs.com/xxx91hx/p/4597732.html
