JavaScript/jQuery and customized form elements

Question

Hallo everyone,

stackoverflow has always been a good resource for programming related questions. This is the first time I ask a question by mysqlf, as I absolutely can't find a good solution. So please forgive me if I forgot anything - I'm willing to learn ;-)

I've used JS and jQuery for a long time now. The benefit of jQuery is, that there are lot's of resources and plugins for various needs you can use out of the box. However, I see lots of websites using quite nice form elements (Styled inputs for: text/password, radio, checkboxes, dropdowns, etc). But I couldn't find any jQuery plugin or JavaScript framework, which provides the possibility to design/style form elements. Either they lack of element support or they're very unstable.

• jQuery UI (which I've recently started to use) doesn't support text-inputs and drop down menus.
• NiceForms is quite neat, but it's a little bit unstable in some browsers and rather hacky. It replaces some elements with various absolute positioned divs, which sometimes completely destroys my layout or just doesn't work (while floating etc.). Also it lacks lots of basic attributes like the width of some elements.

I'm looking for a way to style them graphically. So I don't want to just modify its borders via CSS. Do you know any resources, I can use for that? I'd code it myself, but I'm a bit afraid of the huge work, as it can be very nerve-wracking to make customized form fields work on all the common browsers.

Does anyone know some other (still maintained or stable) approaches than jQuery UI and NiceForms?

Answer 1

There are many solutions out there... Here are 25 of them

Answer 2

Think again

Are there any particular reasons to style form elements outside of CSS capabilities which are growing in time (think of CSS3) and would actually benefit form usability? What kind of styling would you like to do that can't be done by CSS?

On more thing: I suggest you think of your users that are used to the usual HTML form elements and their functionality as well as how they appear on screen. If you'd completely change the way they look, it could mean that your form would make it much worse from the usability point of view. So some styling is OK, too much of it may make your form unusable.

But if it's just custom form fields that you're after, you can get them usually as jQuery plugins, but they are usually based on existing HTML input elements.

Rich functionality alternative with consistent styling

But if you're asking about rich form capabilities there's always ExtJS which is very consistently styled and provides lots and lots (and even more) elements and capabilities. And is very very professionally made (it's been very good since 2.0 and it's just getting better).