Announcing Uniform

Update: View the new Uniform site

As a UI designer, I have to deal with form controls quite a bit. I hate how I can’t make selects, checkboxes, and radio buttons look consistent in all the browsers, so I wrote a plugin to solve just that. Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

It works by hiding the original form elements using opacity, and wrapping div and span tags around the elements. Then, as the different events take place, the plugin applies certain classes to the elements. I’ve seen this method used a few places on the web, but never as an accessible, easy-to-use jQuery plugin.

Uniform supports the major browsers other than IE6, which has an issue due to the way they draw their form controls. In the case of IE6, it just ignores the form elements, so you can still use the form the same way. IE7 works perfectly.

There is a demo here that you can use to see what you could do. The demo utilizes Progressive Enhancement to style the form controls, which means that Safari and Firefox show a nicer version of the controls, but you could style them however you like. I suggest using Progressive Enhancement or utilizing CSS sprites of some type.

This plugin is very 1.0, so don’t expect it to be 100% perfect. If you find a bug, please email me and i’ll take a look at it.

The code generated looks like this:

Selects:

<div class="[selectClass]">
  <span>Currently Selected Text</span>
  <select>
    [options]
  </select>
</div>

Radios/Checkboxes:

<div class="[radio/checkboxClass]">
  <span class="[checked]">
    <input type="radio/checkbox" checked="checked" />
  </span>
</div>

Usage is very simple:

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

If you want to choose custom classes, the following parameters are available:

  • selectClass: Class applied to the outer div of the select elements (default: selector)
  • radioClass: Class applied to the outer div of the radio elements (default: radio)
  • checkboxClass: Class applied to the outer div of the checkbox elements (default: checker)
  • checkedClass: Class applied to the span of radio and checkbox elements if they are “checked” (default: checked)
  • focusClass: Class applied to the outer div when the element is in focus (allowing for styling of the focus state for better keyboard accessbility) (default: focus)

Just input these parameters as you normally would with any other plugin:

$("select, :radio, :checkbox").uniform({selectClass: "mySelectClass", focusClass: "myFocusClass"});

I hope someone gets some use out of this plugin. Enjoy!

Much thanks to my great friends Thomas and Buck for all their support in creating this plugin.

Download Uniform

ZIP Format, 132 kb

Or view the project on Github