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.
Below is the basic easy to understand markup that has nothing but form fields as shown below
<form action="" method="get" autoComplete="Off">
Name: <br />
<input name="email" type="text" placeholder="Please enter your name"/><br />
<textarea name="address" cols="10" rows="9"></textarea><br />
<input name="submit" class="btn btn-success" type="button" value="Submit"/>
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
z-index: 10000;/*some higher value*/
box-shadow: 0px 0px 2000px 2000px rgba(220,240,255,0.6);
Here is a quick demo to what I am talking about.
All major Latest browsers
I hope this little trick is anyhow useful to you 🙂