if you have any questions or suggestions, a few of you have already and I appreciate your feedback.
Note: The image-caching flicker issue in IE6 has now been significantly reduced but not 100% fixed. The flicker no longer occurs on mouseover but a slight flicker occurs when checking/unchecking checkboxes or selecting radio buttons.
First, I would like to thank all of the guys (and gals) over at Slashdot.org for their feedback on formStyle.
I have fixed a couple of issues, the first and most important to me is that it is now possible to tab through form fields and select them with the spacebar in both IE and Firefox. Unfortunately this functionality does not extend to Opera which refuses to achknowledge the empty links as tabbable items.. I think.
Secondly, I have added some javascript to check if images are enabled to return ordinary form controls where images are disabled but CSS/JavaScript is still enabled.
Thirdly, I added a background colour to the page.. I'm lazy! The tables are staying though. Grr!Finally, I formally achknowledge the flicker issue in IE6 and will try to do something about it as it poses a pretty major issue to the overall usability of the script. The flicker, I believe, is being triggered by the hover psuedo classes on the links.
Please feel free to email me at if you have any questions or suggestions, a few of you have already and I appreciate your feedback.
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.
The three key areas of concern come from no javascript, no css or no javascript and no CSS.
In all three circumstances the styled form controls must revert back to their default appearance and behaviour to be usable.
To solve the javascript issue the styled form controls needed to be dynamically inserted into the page using a javascript. No javascript, no change. Original experiments with innerHTML and regExp failed miserably and proved inelegant. However I am still using innerHTML to produce the styled buttons in Internet Explorer.
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.
90% of the code bulk is shoved aside into a javascript, with only well-formed XHTML and wrapping <span> tags with specific classes assigned to mark up the fields we want styled.
Click the round radio buttons or the square check boxes below. Try tabbing into them and manipulating them with the space bar. Try turning off javascript and refreshing, or disabling CSS.
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.
Well, you have waited long enough- you can download a Zip of the example images, javascript file, css file and example page here.
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.