CSS3 Web Page Production Example: input focus luminous effect

Article Introduction: CSS3----The glow effect of the input focus.

in doing the project want to do a input focus effect, feeling very handsome! Collect some information on the Internet, tidy up! Processing into my luminous effect! haha look good, share with you Ah! Add: Chrome input focus By default there is a yellow light and shade, if you do not want to be added to the CSS style

input:focus{

Outline:none;

}

You can get rid of it!

My style code:

input{

border-radius:6px;
border:1px solid #909090;
-webkit-transition:box-shadow 0.30s ease-in-out; Only let the Box-shadow attribute to do the transition effect!
-moz-transition:box-shadow 0.30s ease-in-out; Firefox

}

input:focus{

Outline:none;
border: #87C6F9 1px solid;
box-shadow:0 0 8px Rgba (103, 166, 217, 1);

}

Haha, simple! With CSS3 a few lines of style can be done, the details do enough!

Screenshot below: