Wednesday, May 01, 2013

Creating a "Glow" effect when an input box gets focus, using CSS

With a wide range of devices today, a user can access web forms (eg: registration form, email form...etc), from any of those. It is a good practice to give visual feedback on which field the user is, esp for mobile devices where spotting the cursor can be a bit tricky. 

This problem is effectively solved by providing a visual "glow" around the form entity having focus, as shown below.
As you can see, in above example, when the input box gets focus, a blow "glow" appears. Notice that there is a "transition" effect . Check out the CSS tab above to find out how its done.

Thanks for visiting!