Styled Form Controls

Accessible, pretty forms developed by Philip Howard

Index

The Problem

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

The Constraints

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.

The Solution

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.

The Elegance

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.

The Example

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!

Check Boxes
Radio Buttons
Rating
Poor Average Good
1 2 3 4 5 6 7 8 9 10
Even More Radio Buttons

The Code

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.

The Notes

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.