Styled checkboxes and radiobuttons
Posted 6. augusti 2005, 20:29 [Edited 15. oktober 2005, 01:03]
With the use of CSS and unobtrusive javascript we can do exactly what we want with checkboxes and radiobuttons.
With something as simple as
<input class="heart" type="checkbox" name="input-name" />
we replace the checkbox with an image of a heart instead.
The javascript is released here
This work is inspired by Philip Howards Styled Form Controls.
The reason I did this script was because I wasn’t realy satisfied with Philips solution of adding some extra markup, and that the span needs the attribute name. This will cause this script to fail when we try to validate it throw the W3C validator.
Since I was in a little rush to release this before my trip to Berlin I have just test it in Firefox 1.0.6 and Internet Explorer 6.0.
I havent figure out how to get labels to work with the fields yet, but I did some testing and just commented out that lines, so if you feel like debugging this please do!
