Styling form controls has always been limited with HTML and CSS. Not anymore. FancyForm provides the solution by letting you style checkboxes and radio buttons as you would any other elements, while degrading gracefully on older and non-graphical browsers.
Here’s an example of what’s possible with the script:
![[styled checkboxes]](http://lipidity.com/images/fancy-20070828-190448.png "FancyForm styled checkboxes, before and after")
Not only does it let you style the checkboxes, you can also add your own custom JavaScript hooks, events, effects and a whole lot more.
Find out more and please let me know of any bugs or possible ideas, or jump straight to the demo.
23 Comments so far
Leave a commentVery nice.
It’s definitely something I hope to see more of in the future.
mentioned by Gareth on August 28, 2007 9:03 pm | Permalink
Very nice, clever solution
Maybe i come back to steal something ..
J.
declared by Jasper on August 28, 2007 11:24 pm | Permalink
Doesn’t work in IE
reported by aer on August 29, 2007 6:54 am | Permalink
Looks great, I remember reading about this not to long ago. I forgot about it and I just might happen to have a use for it now.
Possibly the best part of the post is your use of Skitch for the image! That text looks awfully Skitchy =)
I’m a new fan for your blog. Keep posting exciting stuff!
stated by Joseph Pecoraro on August 29, 2007 9:18 am | Permalink
This method was released about 2 years ago:
http://www.flog.co.nz/index.php/journal/arc-adams-radiocheckbox-customisation/
voiced by Mark on August 29, 2007 2:34 pm | Permalink
@Mark, it doesn’t work in Safari .. this does:-)
stated by Jasper on August 30, 2007 12:52 am | Permalink
Thank you.
There have been quite a few complaints about IE support (namely the lack of), but I don’t actually have IE, so if anyone could provide some assistance regarding what the errors are, that’d be fantastic.
declared by Ankur on August 30, 2007 7:46 am | Permalink
Line 1, Char 1:
Invalid property value
Line 61, Char 5:
Object doesn’t support this property or method
recorded by Garth Kidd on August 31, 2007 12:41 pm | Permalink
Very cool… although I’m no interface expert, I’m feeling both the checkbox and radio button to be way too small and perhaps unrecognizable as checkboxes and radio buttons. Can they be scaled up or slightly redesigned?
uttered by Gui on September 11, 2007 3:25 pm | Permalink
Thanks Garth. I’ll leave it someone more patient than myself to figure out the issues with IE.
GUI, the checkbox + radio are only there in the example. When this is actually used, you get to style it yourself.
uttered by Ankur on September 11, 2007 4:08 pm | Permalink
on line 62 of moocheck.js
change e.preventDefault(); // fix for labels
to
if (typeof e.preventDefault == ‘function’)
e.preventDefault(true);
else if (typeof e.returnValue == ‘function’)
e.returnValue(true);
This should fix any errors in IE 6 and 7
determined by Alan on September 14, 2007 12:31 am | Permalink
Awesome
will use this seen as it uses MooTools
composed by James on September 23, 2007 5:22 am | Permalink
Anyone have an idea how to get this to work with Fancyform checkboxes?
http://moo.floor.ch/examples/formcheck/
reasonded by Mike on October 3, 2007 12:39 am | Permalink
Mike, the instructions should still work. Just add the script tags (but not mootools since you’ve already got that loaded) and it should work just like that.
mentioned by Ankur on October 4, 2007 10:38 am | Permalink
FancyForm works just fine. The formcheck script does not.
The tip/error bubble does not work on checkboxes when FF is present. No errors are thrown in Firebug.
announced by Mike on October 4, 2007 7:17 pm | Permalink
I finally got an error as to why it does not work.
Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
reasonded by Mike on October 17, 2007 1:02 am | Permalink
Really slick, thank you!. The only issue I have with it is the onSelect event. If you have a checkbox that is initially in a selected state, the event fires when FancyForm is initialized. For example, if you wanted to use an XHR on select, it will fire before it is clicked on to change state. I was able to overcome this by using a variable for page init, and only to execute the onSelect code after the initial render.
determined by Kurt on October 24, 2007 3:03 am | Permalink
Thank you for that lovely plugin !!
Just an idea for a litte new feature for the next relase. I do have quite often some dynamicly generated content with checkboxes. With your version 0.95 I do have to add the checkboxes with the add functionality. It would be great if you had a “refresh” command, so that it reloads and replaces the new generated checkboxes automaticly.
Again, thanks for the plugin. Keep on working
disclosed by Mogilny on March 30, 2009 10:57 pm | Permalink
Mogilny, thanks.
You can refresh the checkboxes like this:
or more simply:
revealed by Ankur on March 31, 2009 6:31 pm | Permalink
Great work!!!
I have one issue, I have a Three thousand (3,000) number of records to be display in one page including fancy form’s checkbox besides it. However using IE browsers, An Error display stating Object doesn’t support this property or method. When I tried to debug it using microsoft script debugger it points to window.fireEvent(’domready’); under mootools file
Please help.
recorded by Leopold on December 2, 2009 4:51 pm | Permalink
Hello, very cool plugin, but some issues with IE (6,7 and 8).
mootools.js line 1558
moocheck.js line 39 ($each($$(’form’))
and like Leopold : mootools.js line 3086 (domready)
Some elements don’t work with the mootools functions like the ‘object’ with the functions : getSize, store, retrieve… (i’ve had some problems with my swf…)
Maybe could be used some standard javascript functions to fix these issues.
divulged by Greg on March 7, 2010 8:17 pm | Permalink
Ok, i’have found the solution : don’t use “send” as id for any element.
Bye.
voiced by Greg on March 7, 2010 8:47 pm | Permalink
Leave a comment