常见input输入框点击发光白色外阴影 focus

先看看具体实现的效果第一就是点击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;}

实例

1	`<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内背景为白色*/
 
 
               }