FancyForm - Pretty checkboxes and radios

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]

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.

20 Comments so far

Leave a comment

1

Very nice.

It’s definitely something I hope to see more of in the future.

stated by Gareth on August 28, 2007 9:03 pm | Permalink
2

Very nice, clever solution
Maybe i come back to steal something ..

J.

posted by Jasper on August 28, 2007 11:24 pm | Permalink
3

Doesn’t work in IE

recorded by aer on August 29, 2007 6:54 am | Permalink
4

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!

professed by Joseph Pecoraro on August 29, 2007 9:18 am | Permalink
5

This method was released about 2 years ago:
http://www.flog.co.nz/index.php/journal/arc-adams-radiocheckbox-customisation/

professed by Mark on August 29, 2007 2:34 pm | Permalink
6

@Mark, it doesn’t work in Safari .. this does:-)

stated by Jasper on August 30, 2007 12:52 am | Permalink
7

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.

composed by Ankur on August 30, 2007 7:46 am | Permalink
8

Line 1, Char 1:
Invalid property value

Line 61, Char 5:
Object doesn’t support this property or method

spoken by Garth Kidd on August 31, 2007 12:41 pm | Permalink
9

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?

mentioned by Gui on September 11, 2007 3:25 pm | Permalink
10

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.

posted by Ankur on September 11, 2007 4:08 pm | Permalink
11

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

recorded by Alan on September 14, 2007 12:31 am | Permalink
12

Awesome will use this seen as it uses MooTools

written by James on September 23, 2007 5:22 am | Permalink
13

Anyone have an idea how to get this to work with Fancyform checkboxes?

http://moo.floor.ch/examples/formcheck/

uttered by Mike on October 3, 2007 12:39 am | Permalink
14

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.

declared by Ankur on October 4, 2007 10:38 am | Permalink
15

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.

reasonded by Mike on October 4, 2007 7:17 pm | Permalink
16

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.

stated by Mike on October 17, 2007 1:02 am | Permalink
17

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.

recorded by Kurt on October 24, 2007 3:03 am | Permalink
18

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

posted by Mogilny on March 30, 2009 10:57 pm | Permalink

Mogilny, thanks.

You can refresh the checkboxes like this:

    FancyForm.chks.each(function(chk){
        FancyForm.update(chk);
    });

or more simply:

    FancyForm.chks.each(FancyForm.update);

RSS feed for comments on this post. TrackBack URI