This one line JavaScript will greatly help web developers on CSS hacks. Maybe you can now say “Yes” to your customers if ever they asked you: “Will my site looks the same on most browsers?“. Putting aside the troublesome IE6, a very detail-oriented client will still give you headaches on consistent browser rendering. Let’s take for example Firefox 3.0.8 and Opera 9.64. Now create a simple form with radio buttons and checkboxes. When you view it on those browsers, they didn’t look the same. It’s fine in Firefox but in Opera, the labels just move up a little bit. With CSS Browser Selector, you can create a class specific for Opera to fix the line alignment.

Demo & Documentation: http://rafael.adm.br/css_browser_selector/
Download: http://github.com/rafaelp/css_browser_selector/tree/master
License: Creative Commons Attribution 2.5 Generic

Checkbox and Radio Buttons

1.) FancyForm

FancyForm is a powerful replacement script used to provide the ultimate flexibility in changing the appearance and function of checkbox and radio buttons form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers. It requires MooTools JavaScript framework.

2.) CRIR: Checkbox & Radio Input Replacement

This combination of JavaScript and CSS will hide checkbox and radio buttons. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. The form is still fully functional if JavaScript is disabled or not supported.

3.) Ryan Fait’s Custom Checkboxes & Radio Buttons

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements.

4.) ARC – Adam’s Radio/Checkbox Customization

The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.

5.) prettyCheckboxes

6.) jQuery checkbox

7.) Articles & Tutorials On Customizing Checkbox and Radio Buttons

• Custom Radio Button Implement With jQuery
• slayeroffice Custom Checkbox Elements
• Customized Html Controls: Creating Custom Checkbox
• Styled Form Controls
• Fancy Checkboxes and Radio Buttons
• Inside Technique : Custom Checkboxes

Select / Dropdown Box

1.) JavaScript Image Combobox

2.) jQuery Dropdown Check List

3.) Custom Select With Icons

4.) ComboBoxes Using MooTools

5.) Select Replacement

6.) Additional Select Box Customization (Won’t Work If JavaScript Disabled)

• mcDropdown jQuery Plug-in
• jQuery Custom Select Box v.0.01
• Arc90 Arc90
• Control.SelectMultiple

Almost All Form Elements

1.) Custom Form Elements (CFE)

Custom Form Elements unites all efforts in the web to enhance web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS. Custom Form Elements work cross-browser, currently supporting most A-grade browsers.

2.) Emblematiq Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

3.) jQuery Plugin: jNice

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

To save you time figuring out if your campaign renders the same in major email clients, CampaignMonitor has put together a guide to CSS support in email clients, both web-based and desktop apps. Unfortunately, Gmail (which I used for personal and business) has the most X‘ed on CSS support.

CSS Support Chart Download:
PDF Format |   Excel Format

The CSS drop-down menu also comes with predefined transformations, including horizontal, vertical left-to-right, vertical right-to-left, horizontal linear and horizontal upwards – all you need to do is to change the class name of the unordered list <ul>. Should you have difficulty in making your styled CSS drop-down menu, just look at the examples which mimic the menus at Adobe, Flickr, MTV and NVidia.

Documentation: http://lwis.net/free-css-drop-down-menu/
Demo: http://lwis.net/free-css-drop-down-menu/dropdown.ultimate.horizontal.html
License: GNU GPL