Download

Download Uniform Uniform-3.0.zip

Get source on GitHub

Uniform styles:

  • Selects (Drop downs)
  • Checkboxes
  • Radio buttons
  • File Upload inputs

Tested & Compatible in:

  • Safari 3+
  • Firefox 3+
  • IE7+
  • Chrome
  • jQuery 1.3+
  • Opera 10+
  • Degrades gracefully in IE6

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Meet Uniform

Documentation

Installation

Installation of Uniform is quite simple. First, make sure you have jQuery 1.3+ installed. Then you’ll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page:

<script src="jquery.uniform.js" type="text/javascript"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />

Basic usage

Using Uniform can be quite easy as well. Simply call:

$(function(){ $("select").uniform(); });

To “uniform” all possible form elements, just do something like this:

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

Extra parameters

You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like this:

$("select").uniform({
  param1: value,
  param2: value,
  param3: value
});
selectClass (string)

Default: "selector"

Sets the class given to the wrapper div for select elements.

$("select").uniform({selectClass: 'mySelectClass'});
radioClass (string)

Default: “radio”

Sets the class given to the wrapper div for radio elements.

$(":radio").uniform({radioClass: 'myRadioClass'});
checkboxClass (string)

Default: “checker”

Sets the class given to the wrapper div for checkbox elements.

$(":checkbox").uniform({checkboxClass: 'myCheckClass'});
fileClass (string)

Default: “uploader”

Sets the class given to the wrapper div for file upload elements.

$(":file").uniform({fileClass: 'myFileClass'});
filenameClass (string)

Default: “filename”

Sets the class given to div inside a file upload container that spits out the filename.

$(":file").uniform({filenameClass: 'myFilenameClass'});
fileBtnClass (string)

Default: “action”

Sets the class given to div inside a file upload container that acts as the “Choose file” button.

$(":file").uniform({fileBtnClass: 'myFileBtnClass'});
fileDefaultText (string)

Default: “No file selected”

Sets the text written in the filename div of a file upload input when there is no file selected.

$(":file").uniform({fileDefaultText: 'Select a file please'});
fileBtnText(string)

Default: “Choose File”

Sets the text written on the action button inside a file upload input.

$(":file").uniform({fileBtnText: 'Choose&hellip;'});
checkedClass (string)

Default: “checked”

Sets the class given to elements when they are checked (radios and checkboxes).

$(":radio, :checkbox").uniform({checkedClass: 'myCheckedClass'});
focusClass (string)

Default: “focus”

Sets the class given to elements when they are focused.

$("select").uniform({focusClass: 'myFocusClass'});
disabledClass (string)

Default: “disabled”

Sets the class given to elements when they are disabled.

$("select").uniform({disabledClass: 'myDisabledClass'});
activeClass (string)

Default: “active”

Sets the class given to elements when they are active (pressed).

$("select").uniform({activeClass: 'myActiveClass'});
hoverClass (string)

Default: “hover”

Sets the class given to elements when they are currently hovered.

$("select").uniform({hoverClass: 'myHoverClass'});
useID (boolean)

Default: true

If true, sets an ID on the container div of each form element. The ID is a prefixed version of the same ID of the form element.

$("select").uniform({useID: false});
idPrefix (string)

Default: “uniform”

If useID is set to true, this string is prefixed to element ID’s and attached to the container div of each uniformed element. If you have a checkbox with the ID of “remember-me” the container div would have the ID “uniform-remember-me”.

$("select").uniform({idPrefix: 'container'});
resetSelector (boolean/string)

Default: false

This parameter allows you to use a jQuery-style selector to point to a “reset” button in your form if you have one. Use false if you have no “reset” button, or a selector string that points to the reset button if you have one.

$("select").uniform({resetSelector: 'input[type="reset"]'});

Additional functions

In addition to the parameters, there are a couple of other ways you can interact with Uniform.

$.uniform.update([elem/selector string]);

If you need to change values on the form dynamically you must tell Uniform to update that element’s style. Fortunately, it’s very simple. Just call this function, and Uniform will do the rest.

$.uniform.update("#myUpdatedCheckbox");

If you are lazy, or just don’t specifically know which element to update, you can just leave out the parameter (see below) and Uniform will update all Uniformed elements on the page:

$.uniform.update();
$.uniform.elements[]

You can get an array of all the elements that have been Uniformed at any time using this public variable. Wouldn’t advise changing the contents though!

Returns: Array [DOM Elements]

var uniforms = $.uniform.elements;

Tips & tricks

Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:

Remember to change the CSS classes in the theme if you change the parameters for elements’ classes. This can be tedious work, but if you don’t do it, it’s not going to look correct. Find and Replace is your friend.

Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in Javascript or using a Reset button of some kind remember to call $.uniform.update(); to sync the changes with Uniform.

Uniform is disabled in IE6. It’s not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your “naked” form elements look alright in there.

You’re on your own for styling text inputs and more. Fortunately, things that are not handled by Uniform are pretty easy to skin. :)

If you have ideas, or bugs, please post them in GitHub. We rely on our users for ideas for improvements and bug reports. Otherwise Uniform will stay static.

Themes

Theming is central to the philosophy of Uniform. We don’t want you to feel limited to just using the default style. You can design your own theme with our theme kit and create most of the code you’ll need using our custom theme generator.

You can also download themes created by others. Here are some of our favorites:

Uniform Default by Josh Pyles Download
Aristo by 280North / ported by Josh Pyles Download
Agent by Collin Allen Download

Send your custom themes by creating a pull-request.

Contribute

Have ideas for Uniform? Want to submit a bug fix or patch? We collaborate on Uniform on GitHub, and we welcome you to join us as well! Visit Uniform on GitHub.