★

Enhance your input fields with simple CSS tricks

27. July 2008 • 78 comments

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!

78 Responses

  1. Ramesh Soni 28. July 2008 at 11:27

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

  2. Janko 28. July 2008 at 14:19

    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/

  3. elcodigodebarras 28. July 2008 at 17:50

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

  4. tante 28. July 2008 at 18:58

    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.

  5. Janko 28. July 2008 at 21:04

    @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

  6. Muhammad Mosa 29. July 2008 at 01:31

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

  7. John 29. July 2008 at 02:39

    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?

  8. Janko 29. July 2008 at 09:21

    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>

  9. Romeo 29. July 2008 at 11:02

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

  10. Bash Bosh 29. July 2008 at 11:32

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

  11. Colin Robertson 29. July 2008 at 11:43

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

    thanks

  12. Veera 29. July 2008 at 14:04

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

  13. jrummell 29. July 2008 at 14:21

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

  14. ice cool 29. July 2008 at 15:14

    where can i get the source code or sample downloads…

  15. dave 29. July 2008 at 15:58

    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…

  16. John McCollum 29. July 2008 at 21:49

    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.

  17. George 29. July 2008 at 23:47

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

  18. Janko 30. July 2008 at 12:12

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

  19. Helton Valentini 1. August 2008 at 02:32

    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.

  20. Ramesh Soni 1. August 2008 at 11:12

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

  21. Jeena 1. August 2008 at 15:15

    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.

  22. Janko 1. August 2008 at 23:40

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

  23. Janko 2. August 2008 at 22:03

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

    Ramesh, very nice one!

  24. Ramesh Soni 3. August 2008 at 08:42

    Thanks Janko..

  25. HC 4. August 2008 at 11:16

    Janko, useful sharing, thanks.

  26. Bill Beckelman 4. August 2008 at 19:58

    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

  27. Janko 5. August 2008 at 00:23

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

  28. Eneza 5. August 2008 at 07:40

    (A)

    I like it I like it a lot

  29. Narayana Moorthy 5. August 2008 at 09:31

    Thanks for sharing your thoughts. Excellent and very useful

  30. thenetguruz 5. August 2008 at 12:46

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

  31. evpstud 5. August 2008 at 14:14

    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.

  32. Affordable Web Design 8. August 2008 at 04:32

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

  33. Andrew 8. August 2008 at 15:24

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

  34. dj_rov 9. August 2008 at 14:41

    thanks for the sharing

  35. Tom 13. August 2008 at 00:43

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

  36. Patrick Kwinten 13. August 2008 at 09:23

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

  37. ice cool 13. August 2008 at 13:30

    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….

  38. Janko 13. August 2008 at 14:45

    @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 :)

  39. ice cool 13. August 2008 at 16:07

    @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…

  40. Janko 13. August 2008 at 18:58

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

  41. ice cool 14. August 2008 at 16:08

    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….

  42. Janko 14. August 2008 at 17:58

    @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.

  43. Scott Waite 15. August 2008 at 22:36

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

  44. ice cool 17. August 2008 at 08:51

    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 ???/

  45. Janko 17. August 2008 at 10:05

    @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.

  46. Mepho 18. August 2008 at 06:21

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

  47. Save Youtube 19. August 2008 at 21:01

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

    i love wordpress..

  48. amik 20. August 2008 at 12:27

    simple but great looks

  49. Samuel Bran 24. August 2008 at 07:01

    Great tutorial Janko.

  50. Amr Elsehemy 25. August 2008 at 14:53

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

  51. Wayne 27. August 2008 at 02:59

    Excellent review of some solid concepts!

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

  52. Julius Bacosa 27. August 2008 at 05:52

    Cool Input fields… (H)

  53. Sava 4. September 2008 at 10:00

    very nice … I especially like the colors you chose.

  54. Danh ba web 2.0 15. September 2008 at 03:42

    Thanks you very much . Great tutorial for me !

  55. tommy 21. September 2008 at 19:57

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

  56. loreto 23. October 2008 at 22:31

    Hey, nice form bro.

  57. John 7. November 2008 at 12:01

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

  58. VJPQ Directory 17. November 2008 at 16:26

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

  59. Rene 22. November 2008 at 04:37

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

  60. Leandro 11. December 2008 at 13:17

    nice, pretty and very helpfull trick, thanks

  61. yoyocaso 25. December 2008 at 07:07

    Very nice!

  62. Vaibhav Gupta 30. December 2008 at 18:06

    Very Good!

  63. Jamiel Sharief 2. February 2009 at 12:14

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

  64. Web Design Manchester 2. February 2009 at 22:42

    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!

  65. العاب 8. February 2009 at 04:56

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

  66. software developement 10. February 2009 at 03:28

    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

  67. 사 라 23. February 2009 at 09:05

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

  68. Scarf*oo 5. March 2009 at 15:57

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

  69. linY 10. March 2009 at 09:08

    顶之

  70. Scott Mackie 14. March 2009 at 13:14

    This looks really really nice – thanks alot Janko!

  71. Affordable Software 15. March 2009 at 13:46

    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.

  72. ahmadmarafa 29. April 2009 at 08:25

    thank you so much for sharing

  73. Robert 3. June 2009 at 04:54

    pretty nice tutorial =)

  74. liliansi 7. July 2009 at 15:06

    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

  75. liliansi 7. July 2009 at 15:31

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

  76. Haris 25. September 2009 at 08:39

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

  77. shawn 30. October 2009 at 12:21

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

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

  78. Nardu 7. November 2009 at 23:22

    Thank you for this article