I’m a big fan of the Filament Group’s UI work. They put a lot of thought into their work, and ensure everything they make is not only beautiful, but as accessible and as semantic as possible.
One of my favorite pieces of work by the Filament Group is their approach to stylized checkbox and radio <input> elements, as described in their post Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)
Having said all that, I’ve never actually used any of Filment Group’s UI code in my projects because of one little obstacle: they rely on jQuery. Mind you, I’m not a jQuery hater, but I prefer MooTools and build all my major projects using MooTools. Switching to jQuery for such a small UI customization is not going to happen. I’ve often thought it would be great to build a MooTools version of Filament’s UI examples, but never had the time… until today.
I’m currently working on a new quiz system at work, and decided I’d incorporate Filament’s wonderful stylized checkboxes and radio buttons into my project, which meant it was time to roll up my sleeves and code me some Moo.
If you want to target specific parts of the page or only certain input types, pass a CSS selector as an argument:
The CustomInput class has been fully JSLinted, and remains very close to the original jQuery version’s size. When compressed (YUI), it squeezes down to about 1.6kb. It uses ‘dollar-safe’ mode for compatibility with other JS libraries.
It has been successfully tested in the following systems:
- Internet Explorer 6
- Firefox 3.5
- Safari 4
- Chrome 4
- Opera 10
Mac OS X (10.6.2)
- Firefox 3.6
- Safari 4
- Opera 10.1
- Chrome 5 (beta)
Major kudos to Filament Group for sharing their ideas with the world.
Update 3/12/2010: Fixed a typo in the JS file preventing the checkedHover class from being assigned.