Common input Box click the Glow white outer shadow focus

First of all to see the effect of the implementation of the first is to click on the effect of input to the default Google click Input is the blue border removed with outline:0; Implementation effect with focus the default state of the border color is generally heavier as border:1px solid #d8d8d8; Background color background: #fcfcfc; There are also corner round border-radus:0.35em;

Focus Click to give a shadow Box-shadow; Border background are all white

input:focus{outline:0; box-shadow:0 0 5px #ccc; Border-color: #fff; Background: #fff;}

Instance

<p class= "field" > <input id= "name" name= "name" type= "text" placeholder= "User name" class= "User-name" ></p>

Css

. field input{                    width:85%;                    Height:2.5em;//input height                    margin-top:2%;                    border:1px solid #d8d8d8;                    Background: #fcfcfc;                    Line-height:2em;                    border-radius:0.45em;                }                /* Mouse point input*/                . Field input:focus{                    -webkit-box-shadow:0 0 5px #ccc;/* Click on the outer shadow of input */                    -moz-box-shadow:0 0 5px #ccc;                    box-shadow:0 0 5px #ccc;                    Border-color: #fff;/* Black border changed to white *                    /outline:0;/* Remove default Google Click input border display Blue  *                    /background: #fff;/*input background is white */                }

　　

　　

Common input Box click the Glow white outer shadow focus