Liquid styled input element with CSS

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 tutorial

Step 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>

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;
}

For the complete code source download this tutorial.

Download this tutorial