Super Easy Form Highlighting

August 18, 2010 mike jQuery, Scripts, 0

Thanks to jQuery, highlighting form fields onFocus has never been easier… just setup your hover class (in this case jHover), and add 4 lines of javascript to the top of your page, and presto… super sweet form field highlighting in less than 5 minutes!

The CSS:

<style type="text/css">
    .jHover {
        background: #ffc;
        border: 1px solid #333;
    }
</style>

.jHover {

background: #ffc;

border: 1px solid #333;

}

</style>

The JavaScript:

<script language="javascript">
    $(document).ready(function() {
        $(':input').focus(function() { $(this).addClass('jHover'); });
        $(':input').blur(function() { $(this).removeClass('jHover'); });
    });
</script>