How to style form elements unobtrusively with JavaScript and CSS?

How to style from elements unobtrusively in all browsers in开发者_运维知识库cluding IE6

There are a few plugins that do what you want. Basically, you want to add special styling to forms via javascript + css, but want the form to function normally if javascript is disabled

Here are two such plugins, but I am sure there are more out there:

1. Uniform for jQuery on Github and The Overview
2. FancyForm for MooTools

This new plugin works pretty well and is more robust than uniforms. http://customformsjs.com/

Use class names for you elements for which you can't apply styles generally in CSS.

So far i found this is best and works in IE 6+, safari 2+, firefox 2+

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Use jQuery. Specifically the toggleClass function and then use CSS classes to style your forms. No plugin required. See jQuery Attributes Documentation.

If you want more styles, check out jQuery UI.