Reader
You are here: Home / Archives for skin form elements

Beautifully Style your HTML Form Elements: Uniform

Last updated on by Gabriel Livan

Uniform is a jQuery Plugin useful to style your checkboxes, drop down menus, radio buttons, and file upload inputs. With this script you can control the look and feel of your form inputs between all browsers. Uniform masks your standard form controls with custom themed controls. It works in synchronization with your HTML form elements to ensure accessibility and compatibility.

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

Improve the Default Look of Your Form Elements

Last updated on by Gabriel Livan

jqTransform is a JQuery Styling Plugin released by DFC Engineering, that allows you to skin form elements. The plugin is released under the GPL license and it is compatible with IE 6+, Safari 2+, and Firefox 2+. You can easily customize the form via CSS.

jq-transform

NiceForms is a non-intrusive JavaScript method that allows you to completely customize your web forms.

nice-forms

Features include:

  • Fully scalable form fields and buttons
  • Customize the look of the forms by creating your own theme
  • Buttons are automatically expanded to accommodate the amount of text present
  • Supports Keyboard-only navigation

Starting with the basic XHTML code for a web form, Niceforms parses the DOM tree, gets all the input fields, hides them, and positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form. Everything is done via javascript.

Creating iPhone-style Checkboxes with jQuery and Prototype

Last updated on by Gabriel Livan

iPhone-style Checkboxes is a progressive enhancement for standard HTML checkboxes which transforms them into the beautiful iPhone toggle switches. The change is purely visual as the underlying checkbox is not touched. The usage of the iphone-style-checkboxes library is very simple. Unzip the downloaded package, place the JavaScript, images and stylesheet where you please. Make sure to update the stylesheet to point to the new location of your images, if they have changed relative to the stylesheet.

Read more from this entry…

Style your HTML Input Form Elements using CSS & JavaScript

Last updated on by Gabriel Livan

Do you want to change the default look of your form elements? Checkout the following scripts that will help you to do that! Some of the libraries used to stylish the inputs are JQuery and MooTools.

prettyCheckboxes is a script useful if you want to have a consistent look for the checkboxes and radio buttons of your forms. The usability of the inputs remain the same after you apply the new effect.

[Go to Project Page | View Demo]

fancyform

FancyForm is a powerful and flexible checkbox replacement script for your classical HTML Input Checkboxes and Radios.

A quick feature list:

  • Quick Setup (just 2 lines or markup are required)
  • Has extendibility (many customization options)
  • Degrades gracefully (forms are working on old browsers)

[Read more]

stylishcontrols

Tips and tricks for accessible stylish HTML controls is a tutorial that shows you how to create stylish form buttons, checkboxes and radio buttons. A simple PHP Helper Script is provided that automatically generates the code.

[Go to Project Page | View Demo]

Custom Form Elements is a UI library that enhances checkboxes, radio buttons, input file uploads, text inputs, textareas, selects, submits, resets & images.

Features include:

  • Modular and small in size
  • CSS Customizable
  • Unobstrusive
  • Maintains usability and accessibility of form elements
  • Supports custom events
  • Enable sliding doors CSS Technique for your text fields/textarea
  • Select all / Deselect all functionality to specified groups of checkboxes

[Go to Project Page | View Demo]