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 only CSS bit or style that is required is listed below






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


Tested on

All major Latest browsers


I hope this little trick is anyhow useful to you :)


VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply