Using JQuery to Style form elements

Question

Hi,

I've seen jquery used to change a form select drop down box in to a 'pretty' drop down list widget. I can't remember where I saw this but does anyone have any links or example code which show examples of how to use jquery to style form elements? I'd prefer it if it was code rather than a built in plug in.

Thanks

Answer 1

You can't really style drop-downs. They're OS-level elements, not CSS elements. You can replace them with a combination of DIVs to emulate a drop-down, but styling on drop-downs themselves is rather limited.

Answer 2

You might like this or this (smoother initial look) plugin. Both plugins aim at unobtrusively replacing the default <select> box.

Answer 3

try the select box replacement from filament group that support jquery ui theme roll!

http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

for check boxes try this:

http://www.thecssninja.com/css/custom-inputs-using-css

for other form elements just use CSS and images!

Answer 4

jQtransform is the best Plugin i found so far, This one is very easy to implement, and progressive enhanced.

This one also unobtrusively replaces the default <select> box.

Also Here is another one: uniform plugin this one has many options.