Don’t you just love how different browsers style (or rather, don’t style) select and option elements? One of the things I dread most as a developer is when the design team come in and produce forms with controls that are totally bespoke and unobtainable due to the browser limitations.
This prompted me to write a mootools class that replaces the existing select items on the page with custom style-able controls through CSS as a progressive enhancement. Here is an example of what the resulting dropdowns can look like:
The idea of skinnable dropdowns is nothing new but not many solutions are done in a way that mimics the select element’s behaviour and events correctly. Here is what mooSelecta does feature:
- support for any type of skins, all through CSS
- support for native element events (will work with scripting)
- support for keyboard look-ups when dropdown is open
- support for input labels
- support for tabindex
Have a look on the mooSelecta example page or on the mootools forge page for the plug-in itself (download etc).
One thing you need to be aware of is that if you want to dynamically change the selected value of a skinned select, you need to fire it’s onChange event for mooSelecta to update. For example, if you have a dropdown with id=”country” and class=”selecta”:
new mooSelecta({ selector: "selecta" }); // change default selected value via js later: $("country").set("value", "United Kingdom").fireEvent("change"); // the event will make mooSelecta update
Aside from that, it’s fine, tested and working in IE6, IE7, IE8, Firefox 2, Firefox 3.6, Safari 4, Chrominum 5. Known issues with Opera keyboard events not being raised as expected. Enjoy!
Hey—this works great. MooTools is so awesome.
I’ve added additional code to capture disabled options, remove the events and add a disabled class. Now it pretty much is just what I needed.
Thanks.
the code for this is available on github: https://github.com/DimitarChristoff/mooSelecta/ if you make a contribution that extends it / fixes it, send me a pull request and I will be happy to review and include it. thanks!
if you’re interested I posted it here:
http://squarehead.myvnc.com/code/mooSelecta_2.js
You can see it in action here:
http://dev.kripalu.org/library
select the third tab “share” then click the “share your stories” button to get the form. Country dropdown has a disabled divider.
This version captures disabled options, removes the events, and adds a disabled class for styling.
I’m just a designer and not too familiar with Git so this is the version I’m using. It’s based on version 1.2 since I’m not running mooTools 1.3 on this project. I’ve commented all my changes.
Thanks again for this class.
oh, i see, i had never considered this — probably because I don’t tend to use disabled options much but I can see how it can be helpful. thanks
Yeah, I never considered it either until this client wanted “United States” separated from the rest of the list.
that’s now supported in full, check github.