CSS3 form field highlight spotlight on focus HTML5

Hi Guys,

Well there are times when you want to add some sort of interactivity to your webpage, one of those is when you introduce modal windows, where user fills up something and take any action “in form” of hitting a button or something. Long story cut short is that you just want to highlight an area which you think is most important to the user.

We will do something cool with our form fields today, that will give you an idea what I am talking about.

The Markup

Below is the basic easy to understand markup that has nothing but form fields as shown below

Nothing unusual that you couldn’t understand above

Now lets check out the CSS part and that is the most important one to introduce our so called dialog mask for textfields/textareas etc

The CSS

The only CSS bit or style that is required is listed below

Result

Demo

Here is a quick demo to what I am talking about.

http://jaspreetchahal.org/examples/html5/formfieldfocus.html

Tested on

All major Latest browsers

I hope this little trick is anyhow useful to you 🙂

Cheers,