As you may or may not know there have always been two common form controls that have completely evaded styling.
Typically, textareas, buttons and text fields have been easy enough to style and the functionality to use images as buttons is inherant to HTML
Being an accessibility advocate and lover of CSS/XHTML design the solution had to be both accessible and fall back nicely to unstyled radio/check boxes where support is not available.
In all three circumstances the styled form controls must revert back to their default appearance and behaviour to be usable.
To solve the CSS problem the styled form controls needed to be invisible with CSS disabled, and likewise the unstyled controls needed to be visible. This was achieved by hiding the unstyled controls with CSS and using a plain Anchor with background images to act as the new control.
To solve the accessibility issues the Anchor comes into play once more. Because it is an Anchor it can be tabbed into and manipulated with keyboard commands and/or clicked.
Finally, hit the Submit Query button for proof that the forms are absolutely usable!
formStyle is original code and, as far as I know, an original idea. The formStyle code is distributed freely, however I do ask for some credit where credit is due- a link back to GamingHeadlines.co.uk or this page would be nice.
Each form field that you want to style must be wrapped in a span with the rbStyled or cbStyled class.
You must include a name which each span to denote which style you want to use for that particular field.
Checkboxes are re-written to produce the value "on" when they are selected. Advanced users may want to tweak this, however I imagine it will be fixed in a future release.