How do I apply jQuery UI styles to normal form elements, like input and select tags?

Question

Maybe I'm missing something, but after reading the jQuery UI docs, I don't see anything about applying theme styles to normal widgets, like input and select tags. After calling button() on buttons and datepicker() on input tags that will pick dates, am I supposed to wrap normal textareas and inputs in a <div class="ui-widget"> to give a consistent-looking style, or give them a certain css class, or call a function on document load that styles everything else?

Answer 1

The jQuery UI themes work just like any other CSS document that you would use. If there is a set of styles you are after on a particular element, often all you need to do is add the classes that define the styles you want to the element in question.

The difficult part is that, depending on the browser, many form elements have widely varying degrees of stylability. In particular, Internet Explorer uses native OS form controls, which get their default styling from the OS theme settings, while other browsers like Chrome and Firefox use their own set of form controls and have a default style set all their own.

In many cases, what the jQuery UI widgets do is hide the default form elements and then replace them with more styleable elements, like a structure of <div>s, that can be styled to mimic actual form elements. These fake structures also have javascript event handlers attached to capture input and proxy it back to the actual form elements, as well as render it within themselves.

So, in a nutshell, applying jQuery UI styles to form elements can sometimes be as simple as just applying the theme classes, or sometimes be as painful as having to mimic the actual form elements. It all depends on your target browsers and the styles you want to apply.

Answer 2

Some examples using Jquery.

$("input:text").addClass("ui-corner-all");

$("#Submit").button();