Enhance your input fields with simple CSS tricks

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

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

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

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

#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!