From time to time I've seen people complain about how boring and unflexible HTML forms are in terms of looks. Some of the designers I've talked to really hate the default button elements, especially when it comes to the radio and checkbox elements.
I was doing some surfing last week and came across some example code on Eric Dolecki's blog which he labelled CSS Radio Buttons. Essentially he was using some JavaScript to hide the default input elements and replace them with images. The code was pretty neat, but a little cumbersome and involves having to add a lot of hooks. So, I spent a couple of hours over the weekend and through together a very rudimentary "Skins" plug-in for qForms.
I've only tested the code in Firefox and IE at the moment, but it seems to work pretty well. In order to see the full effect, your browser will have to support the insertBefore() method. Essentially what the code does is parses through the field elements in a form looking for the type of element you're skinning (currently only checkboxes and radio elements are support.) It'll then hide the element by setting the display property to "none". It'll then insert an image into the DOM right before the input element which has event's attached to the onclick event which will replicate the input element's functionality.
Make sure to check out the demo and make sure to leave comments.
9 Comments
Comments for this entry have been disabled.