Making text fields using jQuery themes

The most respected public, the

JQuery themes framework makes it easy and quick to give the same style to all widgets in the JQuery UI suite. However, this does not concern simple elements - they remain gray and dull. I wanted to design all the other fields in the same style. Let's start with text.

To write a special widget for this will be overkill, we will restrict ourselves to a simple script that we will connect to the Master Page:

        $(function () {
            $('input:text, input:password, textarea')
                .addClass('ui-widget ui-state-default ui-corner-all')
                .hover(
                function () {
                    $(this).switchClass('ui-state-default', 'ui-state-hover', 1);
                },
                function () {
                    $(this).switchClass('ui-state-hover', 'ui-state-default', 1);
                })
                .focus(function () {
                    $(this).addClass("ui-state-focus");
                })
                .blur(function () {
                    $(this).removeClass("ui-state-focus");
                });
        });

First, connect the default classes: ui-widget - the base, ui-state-default - for the default state, and ui-corner-all for rounding corners (does not work in IE). The hover method defines two behaviors: when you hover the mouse, we change the default class to ui-state-hover (the third argument is to remove the smooth transition), and when we remove the mouse, everything returns. Well, for the focus and blur events, we write two different handlers.

update
For all this to work, you need to connect the following scripts:
JQuery
JQueryUI
And the CSS of your favorite topic from here:
jqueryui.com/themeroller The

post is intended for beginners in jQuery. I just spent a couple of hours sorting through all these classes, I wanted to save others time ...

update2
Early I rushed to write a post, fact. By default, you need to set the text fields to the class “ui-widget ui-widget-content ui-corner-all”, by focus - add the class “ui-state-highlight”, and by hover it’s not clear what to do. They have been planning for a year to add classes like ui-form-default and ui-form-hover for such cases.