article:
Elements Design: Beige Web Elements
article:
Elements Design: Form Alert Interface

JS Plugin: Uniform

Advertisement

Sexy form elements with jQuery. Now with HTML5 attributes

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

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?


Implementations

<head>

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

and
<script type='text/javascript'>
  $(function(){
    $("select, input:checkbox, input:radio, input:file").uniform();
  });
</script>
</head>


Customizing CSS

To edit the CSS of Uniform it is highly recommended to not edit the theme files, but to override them using CSS. Make sure your CSS file comes after the uniform theme css file in the HEAD section.

It's common to want to resize the selects or other elements. The best way is to set the width property on the div element, span element and the form element itself. Look through the theme CSS in the presentation section to see where the width property is currently set.


Screenshots

Plugin: Uniform

Plugin: Uniform



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.


Compatibility

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




demo
source
download
github

Advertisement
Tags: uniform, jquery, checkboxes, drop down, menus, radio, buttons, upload, inputs, checkbox, html, css, sprite, psd, adobe, photoshop, theme, custom

Leave a Comment

No Comment

© Creative3x Ltd.