Enhance your input fields with simple CSS tricks

July 27, 2008

We're all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.

See it live

The example you are going to see is something that you use every day: blog comment form. Ok, so what can you do to enhance a web form? You can…

…add some borders

input fields

At least what you can do is to add borders and padding to your input fields. Two examples above shows how you can sat the border color to match your color schema. It is also a good practice to add some padding to input fields. That will make forms more clear. In this example I set the 4px padding to inputs and textarea.

#inputArea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
}

Let me review the code above shortly. This is the code for the second example, the blue one. The entire form has a light blue background #d6ee5f4 and 10px padding. Each input element is displayed as a block, which ensures that labels are positioned above input fields.

Now, this was very simple. But you can do more. You can…

… add some background

You can also add some solid background like in the example below

input fields

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-color: #EDF2F7;
}

Or you can add a soft gradient as a background. The examples above shows gray and blue gradients.

 input fields 

input fields

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-image: url( 'blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}

The trick is simple and is contained in last three lines of the code. You add gradient image as background, set it to be repeated horizontally (repeat-x), and position it to the top of the field. Simple, eh?

But you can do even more! You can…

…add some behavior

But very simple. Make the active input field different. Like in the example below.

input fields

#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

As you can see, the code is very simple. Each time a field get the focus a different styles will be applied. It changes the background and the border. But wait! This doesn't work in Internet Explorer !! So we have to call JavaScript (or jQuery) for help. Ok, you now know that I lied. You can't do this only with CSS. But, hey, it's not my false, talk to IE guys :)

Ok, to do this, we have to change our CSS slightly.

#inputArea input, #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    width: 300px;
}

We will define all styles for all inputs and texareas except for background and border.

.activeField
{
        background-image: none;
        background-color: #ffffff;
        border: solid 1px #33677F;
}
.idle
{
    border: solid 1px #85b1de;
    background-image: url( 'blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}

Next, we'll define two classes that will set the styles for idle and active state. And a touch of jQuery, and viola!

$(document).ready(function(){
    $("input, textarea").addClass("idle");
        $("input, textarea").focus(function(){
            $(this).addClass("activeField").removeClass("idle");
    }).blur(function(){
            $(this).removeClass("activeField").addClass("idle");
    });
});

It is now working in IE. Of course, it is working in Firefox as well. This code does three things: initially, it adds "idle" class to all of the inputs and defined behavior for focus and blur events. Maybe not perfect, but it's working.

So, what else you can do?

Experiment

Yeas, that's right, experiment with different colors, border sizes and backgrounds. You can for example also add hover functionality. Try, and get rid of boring forms!

Let's discuss this on twitter.

78 Comments

  • Ramesh Soni (July 28, 2008)

    You example covers only textbox and textarea. What about combos, radio buttons, check boxes etc.?

  • Janko (July 28, 2008)

    Ramesh, this was just a simple retouching with a few lines of css code. For checkboxes and smilar controls you have to use more complex solutions or to find some scripts like http://lipidity.com/fancy-form/

  • elcodigodebarras (July 28, 2008)

    Thanks for sharing your knowledge with us; with your help internet is getting more friendly for all.

  • tante (July 28, 2008)

    Nice tricks but one thing that many people who style their input widgets forget is that not everyone has his system set up to have "black text on white ground" as default.

    So if you skin one thing like the background to have some white-ish color don’t forget to set the color of the text to the color you want (maybe black). Doing just half the skinning is really problematic.

  • Janko (July 28, 2008)

    @tante: Exactly, one has to take care about their own color schema. The examples I provided present "typical" color schemas and are easy to use for a tutorial like this

  • Muhammad Mosa (July 29, 2008)

    Junko just keep give me more of those, please don’t stop!
    I like it ;-)

  • John (July 29, 2008)

    I’ve pasted the #inputArea input[type="text"], #inputArea textarea into the styles tag and nothing happens. I’m using firefox 2.0 Am I missing something?

  • Janko (July 29, 2008)

    Muhammad, thanks for your support :D

    John, just make sure that your form is placed inside some container with the id=inputArea. For example: <div id="inputArea"><input …></div>

  • Romeo (July 29, 2008)

    Very nice. You’re a peach for sharing this. :D Thanks

  • Bash Bosh (July 29, 2008)

    Thank you for very nice tutorial. Very nice site by the way :)

  • Colin Robertson (July 29, 2008)

    Good advice. Small changes like these can really add a professional touch to forms.

    thanks

  • Veera (July 29, 2008)

    Very useful techniques. I have used some of them in my previous blog design (now I am not using in my current blog)!

  • jrummell (July 29, 2008)

    Very cool. I’ve been using blueprint’s form css for a similar effect.
    http://code.google.com/p/blueprintcss/

  • ice cool (July 29, 2008)

    where can i get the source code or sample downloads…

  • dave (July 29, 2008)

    Janko,

    some good tips. also, in jQuery there is a "toggleClass" method, that will add the class given if it’s not there, or remove it if it is there… might simplify your js a little…

  • John McCollum (July 29, 2008)

    Wow, it’s amazing how the addition of a little colour can really lift the form off the page! Great tutorial, I really enjoyed it. Thanks.

  • George (July 29, 2008)

    Thanks….Small changes like these can really make a difference.

  • Janko (July 30, 2008)

    @ice cool: I added the example and updated the article, thanks

  • Helton Valentini (August 1, 2008)

    Great Article dude. I just love your posts. Could you provide us the background image you are using in your examples ?

    Keep up the good work.

    Thanks.

  • Ramesh Soni (August 1, 2008)

    Janko, here is another trick for enhancing usability:
    http://www.dailycoding.com/Posts/default_text_fields_using_simple_jquery_trick.aspx

  • Jeena (August 1, 2008)

    Why the need of JS?
    You could have used

    input:focus
    {
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
    }

    instead of all that jquery stuff.

  • Janko (August 1, 2008)

    Jeena, that works fine in Firefox, but it doesn’t work in IE. So you have to use some JS to make it work.

  • Janko (August 2, 2008)

    Helton, you can download the entire example here: http://www.jankoatwarpspeed.com/file.axd?file=input-fields.zip

    Ramesh, very nice one!

  • Ramesh Soni (August 3, 2008)

    Thanks Janko..

  • HC (August 4, 2008)

    Janko, useful sharing, thanks.

  • Bill Beckelman (August 4, 2008)

    Janko,

    Thanks for the great post. If you get a chance checkout my post http://beckelman.net/post/2008/08/03/Messing-Around-with-jQuery.aspx for some my ideas I found that could improve the form using jQuery.

    Thanks again for your great posts.

    Bill

  • Janko (August 5, 2008)

    Thank you Bill. Very nice examples, jQuery really rocks!

  • Eneza (August 5, 2008)

    (A)

    I like it I like it a lot

  • Narayana Moorthy (August 5, 2008)

    Thanks for sharing your thoughts. Excellent and very useful

  • thenetguruz (August 5, 2008)

    wow :) looks so cool, will try these css tricks to make my blog forms look good. Thanks :D

  • evpstud (August 5, 2008)

    This is a fantastic tutorial. I love the small changes that can make a huge difference in the design like the gradient and the behavior techniques. You’ve just been bookmarked and Stumbled.

  • Affordable Web Design (August 8, 2008)

    CSS fields are the cheese to my macaroni. – Awesome stuff thanks for posting!

  • Andrew (August 8, 2008)

    I wrote about this back in April, check it out: http://techknack.net/pretty-up-your-forms-with-css/

  • dj_rov (August 9, 2008)

    thanks for the sharing

  • Tom (August 13, 2008)

    I like the blue borders on blue. Might consider this for our swim product.

  • Patrick Kwinten (August 13, 2008)

    Hej great wizzard of CSS. why did you not implement a CSS file when printing your web pages? (D)

  • ice cool (August 13, 2008)

    janko… by default its applying the effect to all the inputs on my page… i dont want it to effect all the input boxes.. how can change the jquery to only effect the inputarea div controls….

  • Janko (August 13, 2008)

    @ice cool: just change jQuery selector to match only inputs inside your wrapper div, for example: $("#inputArea input, #inputArea textarea") It’s pretty much the same as css.

    Patrick, I might consider it for the future, but not for now. Anyway, there is nothing "wizardish" in this tutorail, just a few tips for the beginners :)

  • ice cool (August 13, 2008)

    @janko… i tried your suggestion and it worked but the only problem is that whenver my other input buttons are clicked they get the effect of this class ie… when clicked it becomes all white colored…

  • Janko (August 13, 2008)

    @ice cool: hmm, that’s strange.. did you use $("#inputArea input, #inputArea textarea") selector to add class "idle"and for focus() and blur() functions?

  • ice cool (August 14, 2008)

    yeah…. the other area buttons only become when clicked… after click they are back to there normal class style… the white effect is only seen when the button is active….

  • Janko (August 14, 2008)

    @ice cool: Can you send me an example of your work so that I can debug it? It could be just a sample, no need to send me a real code.

  • Scott Waite (August 15, 2008)

    Love it, makes it simple… as a side note, it’s spelled voila… but i don’t want to be one of *those* people… :-#

  • ice cool (August 17, 2008)

    dear janko, i m trying to use it within my asp.net 2.0 project… i have a login control at the top left side of my page… and i have subscription form, for this form i m using this design style… do u want to me send u the sample code ???/

  • Janko (August 17, 2008)

    @ice cool: I can’t figure out what the bug is from what you described. If you wrapped the subscription form in inputArea div, and used jquery function like this:

    $(document).ready(function(){
    $("#inputArea input, #inputArea textarea").addClass("idle");
    $("#inputArea input, #inputArea textarea").focus(function(){
    $(this).addClass("activeField").removeClass("idle");
    }).blur(function(){
    $(this).removeClass("activeField").addClass("idle");
    });
    });

    everything should work properly.

  • Mepho (August 18, 2008)

    These look great and the jquery is an additional spark~!

  • Save Youtube (August 19, 2008)

    wow really great info. about wordpress comment page area :D

    i love wordpress..

  • amik (August 20, 2008)

    simple but great looks

  • Samuel Bran (August 24, 2008)

    Great tutorial Janko.

  • Amr Elsehemy (August 25, 2008)

    This is one popular post.
    I can see why amazing tutorial keep on it :)

  • Wayne (August 27, 2008)

    Excellent review of some solid concepts!

    I like the ‘at warp speed’ approach/concept too. Great post! Thumbs up!

  • Julius Bacosa (August 27, 2008)

    Cool Input fields… (H)

  • Sava (September 4, 2008)

    very nice … I especially like the colors you chose.

  • Danh ba web 2.0 (September 15, 2008)

    Thanks you very much . Great tutorial for me !

  • tommy (September 21, 2008)

    Thanks for your tips. I am thinking about setting up a blog on my site and can see where these might me useful.

  • loreto (October 23, 2008)

    Hey, nice form bro.

  • John (November 7, 2008)

    Looks good, I’ll have to try this in my next project.

  • VJPQ Directory (November 17, 2008)

    That’s a wonderful improvement. Thanks for teaching us!

  • Rene (November 22, 2008)

    Great tutorial, just what I’ve been looking for.

  • Leandro (December 11, 2008)

    nice, pretty and very helpfull trick, thanks

  • yoyocaso (December 25, 2008)

    Very nice!

  • Vaibhav Gupta (December 30, 2008)

    Very Good!

  • Jamiel Sharief (February 2, 2009)

    Thank you, its a well written and needed post. I also like your site design.

  • Web Design Manchester (February 2, 2009)

    Great article and great site. I’ve pretty much got comfortable with my preferred form layout now, though I think I should start looking at new ideas and maybe some fancy ajax / jquery effects.

    Thanks for the inspiration!

  • العاب (February 8, 2009)

    thank you man this is helpful i will use it soon in my site http://gamezat.net/

  • software developement (February 10, 2009)

    Janko your pretty good..wanna say thank you for sharing your ideas.really helpful especially for newbies.
    this is a great article,list and site.
    thumbs up on SU

  • 사 라 (February 23, 2009)

    very nice!,.tnx for this..^^

  • Scarf*oo (March 5, 2009)

    I agree, experimenting takes you a long way into making more beautiful forms. Nice post btw.

  • linY (March 10, 2009)

    顶之

  • Scott Mackie (March 14, 2009)

    This looks really really nice – thanks alot Janko!

  • Affordable Software (March 15, 2009)

    GREAT tips for beginners looks to make their CSS forms look more pro! I’m a software developer and I found this to be very useful for my students in my programming class I teach.

  • ahmadmarafa (April 29, 2009)

    thank you so much for sharing

  • Robert (June 3, 2009)

    pretty nice tutorial =)

  • liliansi (July 7, 2009)

    Hi. Thanks fot the tut, great idea. I tried on my blog and on Firefox and Chrome it’s ok…but on IE doesn’t work. I use jQuery as you said. Some ideas?! Thanks

  • liliansi (July 7, 2009)

    Excuse me, it’s my fault. My IE dosn’t show js! Thank you, your blog it’s great!

  • Haris (September 25, 2009)

    Thank you man, good AIO explanation. Very often used trick and look nice.
    Selam from Sarajevo

  • shawn (October 30, 2009)

    hi.. great tutorial.. i’ve successfully implement it for my project…

    however, does this trick not working with <input type="file"> ?

  • Nardu (November 7, 2009)

    Thank you for this article