Home Tutorials Fonts Lists Feed RSS Advertising Contact Me

Sunday, January 20, 2008

Liquid styled input element with CSS

12 comments
Save to delicious 0 hits

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

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit
Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS
Comments
12 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to my feeds | Subscribe comments feeds
machinehuman said...

Very nice tutorials.
Cheers!

Gregg said...

Hi antonio, thanks for this tutorial. :)

csseyah said...

great thanks dude :)

sw said...

complimenti, grazie per aver condiviso questa tecnica.

Robby said...

Great tutorial! The only issue I found is that it does not line up in IE 6/7.

Rob said...

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.

Anonymous said...

Looks like this was done in Firefox...doesn't work in IE 7 like mentioned above.

Gigio said...

Nice! If you have an opportunity to come to Tokyo in Japan, I'll buy you a beer.

Coder said...

I have optimized the code you have provided and it's pretty simple to include all over sites i create.

Thanks

helior said...

@ coder

Sooo, are you going to give a link to your optimized code? It's the least you could do..

AnılKaN said...

Thanks man.
But where is the login button :)

Latika said...

Thank you for sharing this very helpful tutorial with us. This article has helped me a lot.

About Me

I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted. Rome, IT.
Feeds RSS Contact Me

SubscribeLatest posts

SubscribeHot Links

Subscribe Design News

Ecoki Eco Green Product Reviews
Apple Reviews and News
CSSRockstars - You Design, We Code. Your PSD to HTML/CSS for just $149