6 jQuery Form Input Style Plugins

Sam Deering

Tired of your plain web forms? Standard text input, selects, and checkboxes etc… These are the only built-in HTML user interface for user interactions but we can actually add some flavor to it by using some of these jQuery Form Input Style Plugins we have collected for you. Have fun!

Related Posts:

1. File Style Plugin for jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css.
File Style Plugin
SourceDemo

2. Niceforms

A non-intrusive JavaScript method that allows complete customization of web forms.
Niceforms
SourceDemo

3. Make image buttons a part of input fields

Here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.
image buttons
SourceDemo

4. jqTransform

A jQuery styling plugin which allows you to skin form elements.
jqTransform
Source + Demo

5. Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
Custom Checkbox
Source + Demo

6. jNice

Tested in FF 2+, Safari 2+, IE 6+
jNice
Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.facebook.com/balazsi.miklos Balázsi Miklós

    Uniform?

  • http://twitter.com/gmilby Gregory Milby

    Last i heard, the jqTransform project had died about a year or so ago.
    forget what they guy recommended to use as a replacement

    just checked – it was abandoned: https://github.com/jcamenisch/jqTransform

    • http://jquery4u.com/ jQuery4u

      Thanks Greg

  • http://twitter.com/gmilby Gregory Milby

    Reading this post again, we’ve been using the bootstrap [twitter bootstrap] forms often – they’re good/look great if the size/shape etc is what you need… wondering how difficult it would be to make a widget to tweak them (to specific diminsions).

    Thanks!

    • http://jquery4u.com/ jQuery4u

      Hey Greg, yes we have done exactly this for one of our projects! It’s works a treat but there are some media queries in bootstrap which can cause a few problems but once these have been removed/tweaked it works fine!
      Sam

      • http://twitter.com/gmilby Gregory Milby

        awesome!
        maybe down the road you can give some tips for the tweaks!
        Thank you Sam,