How to Add Focus Glow on Input Fields

Add Focus Glow on Input Fields

Adding effects to input fields helps your users to find their way around. Using the CSS property, box-shadow, you can create a nice subtle glow effect, in CSS 3 supporting browsers, when an input field is given focus.

Set standard properties for the input fields:

input {
font: 14px/1.6em arial;
width: 200px;
height: 25px;
padding: 3px;
margin: 5px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}

Add Glow on input:focus

Then, on the :focus pseudo-class, change the border color and add a subtle glow using the blur and color values of the box-shadow property:

input:focus {
border: 1px solid #77B3D8;
-moz-box-shadow: 0 0 7px #C8E0EF;
-webkit-box-shadow: 0 0 7px #C8E0EF;
-o-box-shadow: 0 0 7px #C8E0EF;
-ms-box-shadow: 0 0 7px #C8E0EF;
box-shadow: 0 0 7px #C8E0EF;
}