Can I Get A Witness?

On the 13th of July, Slashdot had a post about a guy who had, using some Javascript and interaction with the HTML DOM, replaced standard checkboxes and radio buttons on web forms with nicer looking versions; basically, he has a way to use nicer looking widgets on a web form. They’re quite attractive. His research can be found on this page.

He mentions in “The Code” section that this is — as far as he knows — an original idea. There’s no date on the page itself, so it’s difficult to tell when he had the idea.

What I can tell you is this: I had this working somewhere between 2005-02-14 and 2005-02-16 according to my CVS logs. I’m working on an online questionnaire delivery and decision-processing system for CHADIS, and I developed this technique over a period of time, and finally checked the code into my CVS repo over a period of 2 days, including updates and fixes. Of course, I have root access on the servers which host our CVS repositories, so I could be falsifying that information, however I don’t really have any motivation to do so.

Radio buttons replaced with stylized buttons. The orange-lit button is the currently-selected button, while the light-blue-lit one is under the cursor. Update: 2005-07-18 15:09: Oops. When I did a screenshot, the “light-blue” button that I describe disappeared, probably because the cursor disappears when you take a screenshot. I promose that it works 😉

My code is all in Javasript, keps in a separate file with a smattering of onclick-style hooks into the library that I’ve written. All of the form elements are standard HTML form elements, and the whole thing degrades gracefully on non-CSS/Javascript browsers (yes, I test my software on Lynx, thank you very much).

The same page with styles disabled.

I’m sure that someone else has identified this problem (of not being able to adequately style HTML radio buttons and checkboxes) and developed a similar solution as well. It’s nice to know that someone has found a solution very similar to my own. It gives me a sense of validation that someone else came to the same conclusions that I did: that this is a problem that is best solved with Javascript and DOM manipulation, and that degrading usefully on browsers that don’t support all the whiz-bang features is not only possible, but a worthwhile goal.

The same page when viewed with Lynx v2.8.5rel.1.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: