What is the best form element styling library/plug-in (jQuery)? [closed]

Question

In the project I am working on at the moment form elements (like <input>,<select>,<textarea> etc) must have non-standard 'look-n-feel'.

Which library or plugin (jQuery) can you recommend for this?

I have searched through some the available libraries, but did not find a library that suits my needs. All of them have 'real' - 'fake' element idea behid them. The project has a lot of form elements created on-the-fly and injected into the DOM.

The main requirements are:

• Creation of 'fake' element/s on the fly.
• Ability to apply styles for one node or CSS selector (not the whole page).
• Non-intrusive events propagation between fake and real elements. (Fake element should respond to changes in real element and send events occuring on it to the corresponding real element like blur, focus, change, click. Library should take care about events propagation, not the code)
• It should be compatible with IE7 and upwards.
• Should have good documentation and flexible public API

I am struggling with one library and almost "adapted" it to the requirements but it lacks documentation and the licencing is unclear as to whether I can modify it.

Thank you very much for the help!

Kind regards.

Answer 1

you may want to look into those (february 2014):

uniformjs.com - form elements styling (IE7+, chrome, safari, firefox)

github.com/emblematiq/Niceforms - form elements styling - (maybe?) sounds risky as no community, one commiter only (IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+)

github.com/harvesthq/chosen and harvesthq.github.io/chosen - form select/dropdown box

ivaynberg.github.io/select2 - dropdown boxes (IE8+), it seems to have originated from Chosen.js (to be double checked)

github.com/Robdel12/DropKick and robdel12.github.io/DropKick - form select/dropdown box

github.com/gfranko/jQuery.selectBoxIt.js - form select/dropdown box

brianreavis.github.io/selectize.js or github.com/brianreavis/selectize.js - hybrid of a textbox and box - useful for tagging, contact lists, country selectors, and so on

arthurgouveia.com/prettyCheckable - form checkboxes & radio buttons styling (IE7+, Chrome, Firefox, Safari & mobile browsers)

http://xoxco.com/projects/code/tagsinput/ or https://github.com/xoxco/jQuery-Tags-Input - tags

Twitter Bootstrap might be a good option too - Use the Customizer to only load the part of the library that you need, read more about customizing Twitter bootstrap components

Answer 2

You can see this!

http://twitter.github.com/bootstrap/base-css.html#forms

Bootstrap has very and util things that can help you!!

Answer 3

You might have a look at Twitter Bootstrap. I believe it uses CSS to perform most of its tricks so you shouldn't need the concept of a delegate component (the real/fake thing) to get a slightly more polished look and feel.

Answer 4

I really like jQtransform: you just need to include jQuery library and plugin jqtransform

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

and then apply the transformations to all form

<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form").jqTransform();
});
</script>

or to a specific form

<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});
</script>