If you hate the standard design of FORM elements, this tutorial helps you to design nice input elements using a background image which fits automatically the width of the fields.
This tutorial explains how to implement a simple linquid styled <input> element using css.
Download this tutorialStep 1: HTML code
HTML code is very simple. I added a <fieldset> element with two <input> elements:
<fieldset class="w_auto">
<legend>Login</legend>
<div class="msg">Add a message here. New user? <a href="p2.html">Sign-up</a></div>
<label>User</label>
<div class="w_span_auto"><input type="text" name="email" id="email" class="w_auto"/></div>
<label>Password</label>
<div class="w_span_auto"><input type="password" name="password" id="password" class="w_auto"/></div>
Lost password <a href="p1.html">Retrieve data</a>
</fieldset>
<legend>Login</legend>
<div class="msg">Add a message here. New user? <a href="p2.html">Sign-up</a></div>
<label>User</label>
<div class="w_span_auto"><input type="text" name="email" id="email" class="w_auto"/></div>
<label>Password</label>
<div class="w_span_auto"><input type="password" name="password" id="password" class="w_auto"/></div>
Lost password <a href="p1.html">Retrieve data</a>
</fieldset>
Step 2: CSS code for liquid input elements
In order to implement a liquid input I used this HTML/CSS structure we have already seen in this post. The structure is like this:
...HTML code (see step 1) is something like the following:
<div class="w_span_auto"><input type="text" name="email" id="email" class="w_auto"/></div>
...and CSS code is:
div.w_span_auto{
background:url(wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
clear:both;
margin-bottom:14px;
}
input.w_auto{
border:none;
height:28px;
padding-top:6px;
text-indent:18px;
display:block;
font-size:15px;
color:#666666;
width:100%;
background:url(wl.png) top left no-repeat;
}
background:url(wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
clear:both;
margin-bottom:14px;
}
input.w_auto{
border:none;
height:28px;
padding-top:6px;
text-indent:18px;
display:block;
font-size:15px;
color:#666666;
width:100%;
background:url(wl.png) top left no-repeat;
}
For the complete code source download this tutorial.
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Very nice tutorials.
Cheers!
Hi antonio, thanks for this tutorial. :)
great thanks dude :)
complimenti, grazie per aver condiviso questa tecnica.
Great tutorial! The only issue I found is that it does not line up in IE 6/7.
Nice tutorial. Visually, it makes a nice form, however, when the input is active, Safari clips the right side where the div is added with its active border. Firefox is fine. Didn't test in IE, but another person commented on some issues.
Looks like this was done in Firefox...doesn't work in IE 7 like mentioned above.
Nice! If you have an opportunity to come to Tokyo in Japan, I'll buy you a beer.
I have optimized the code you have provided and it's pretty simple to include all over sites i create.
Thanks
@ coder
Sooo, are you going to give a link to your optimized code? It's the least you could do..
Thanks man.
But where is the login button :)
Thank you for sharing this very helpful tutorial with us. This article has helped me a lot.