With the advent of CSS3, HTML 5 and the power of the ever-growing jQuery the internet is turning out to be a more interesting place. Previously you were given fairly limited access to input form elements in terms of how you could style them. Of course you could always access the css style attributes, however, if you wanted to add a background images, or add some advanced look and feel without loads of code and hacking it was almost impossible.

To add to that the headache of even considering how long this would take to test cross-browser may not even be worth the effort in the end. But at least that has changed with a bit of extra magic.

A fresh look with the jQuery Uniform  plugin

The jQuery Uniform plugin that all changes how you can customize your UI now with the addition of richer styling for your form elements. Just taking a look at the example page you can see the pretty clear mix of the CSS3 formatting on the text-shadows, as well as the form elements rendered by the jQuery plugin. Just take a look at the screenshot below.

Plugin Name: jQuery Uniform Plugin

Plugin URL: http://pixelmatrixdesign.com/uniform/

Demo: Plugin Demo

Docs: Plugin Documentation

Sample Code

Getting into the source code and getting to testing the plugin is not too bad. It is a pretty clean function and the parameters are available are pretty extensive, but to transform every select or input that were a checkbox, this could be achieved with a singe line call of the uniform() function.

$("select, input:checkbox").uniform();

Verdict

The uniform plugin is very handy, especially when it comes to styling form elements that you may previously not have had access to. But despite this, there are some limitations that this plugin has the hold it back slightly, yet overall it is still pretty clear that this delivers.

Pros

1. Fair size 34kb zipped.
2. Allows for styling of range of elements: Selects (Drop downs), Checkboxes, Radio Buttons and File Upload Inputs.
3. Cross Browser tested  -  Except for ie6.
4. Simple to install and Use.
5. Good Simple Documentation
6. Themes samples available.

Cons

1. No styling for text inputs – It would be great to see this for uniformity.

Summary

When creating a custom UI or just spicing up your forms, this is definitely a plugin worth using. Other than the minor fact that it does not do your text inputs as well is something that you can live without.

The availability of pre-made themes for you to try out and develop upon makes this the perfect plugin for designers who may have previously had to use something like flash or an intricate hack to get the effect they were looking for.

The ease to get through the documentation and installation also means that is should be fairly easy for anyone who is familiar with how to add a jQuery plugin will be able to install this and get going fast.