In this tutorial you will learn how to highlight the forms fields using css and jquery. Now a days it is special requirement to create better and user friendly GUI forms so that user can visit your website again and again. The purpose of this tutorial is to make your forms different to forms used in other websites for better user experienced. Now let’s have a look over how to highlight the form fields using css and jquery.

How to highlight the form fields using css and jquery

<style type="text/css">
         .setFocus
        {
            border: solid 2px #95ce61;
            background: #fff;
            color: #000;
        }
        .setIdle
        {
            background: #fff;
            color: #6F6F6F;
            border: solid 2px #DFDFDF;
        }
    </style>
<script language="javascript" type="text/javascript">
  $(document).ready(function () {
            $('input, textarea, select').addClass("setIdle");
            $('input, textarea, select').focus(function () {
                $(this).removeClass("setIdle").addClass("setFocus");
            });

            $('input, textarea, select').blur(function () {
                $(this).removeClass("setFocus").addClass("setIdle");
            });

            //Applying MSIE Check
            if ($.browser.msie) {
                $("select").bind("focusin", function () {
                    $(this).addClass("setFocus");
                });

                $("select").bind("focusout", function () {
                    $(this).removeClass("setFocus");
                });
            }

        });
</script> 

Now let's understand. We have declared two css classes setIdle and setFocus. The only discussable thing in both classes is margin property through which I am handling all the highlighting of form fields in onfocus event.


After this I have code written in jquery that will call these classes for form fields against desired events such as focus and blur. I am just assigning setFocus class for focus event of form elements and then calling setIdle class for blur event of form elements. Normally form fields/elements are categorized in three categories

1. Input
2. Textarea
3. Select

To cover all these fields I have written following line of code

$('input, textarea, select').addClass("setIdle");

So this is the proper way to highlight form fields using jquery and css. Hope it will work for you.