Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

mootools select element replacement as a styling enhancement

branch: master
README.md

mooSelecta

Screenshot

A MooTools select element styling replacement Class done as a progressive enhancement. Tested and working on: IE6, IE7, IE8, IE9, FF3+, Chromium 5+, Safari 4.0.4+, (please report others to christoff at gmail.com)

Style-able entirely through CSS with the original element events intact, adhering to tabindex, keyboard navigation and so forth.

The "real" selects are being placed off-screen so their functionality is completely preserved in that any forms with them will continue working as per usual.

Now updated for MooTools 1.4.2 without compatibility mode.

Screenshots

Default skin:

Screenshot 1

Skin using elements from http://www.emblematiq.com/lab/niceforms/

Screenshot 2

How to use

You need to setup your CSS classes based upon the ones already provided in the Example/css directory. Look at the options part of the mootools class to see what bits are customisable and follow the example.

To glue it all together, just include the mootools-core and then mooSelecta.js

Within your domready or load callback function, create an instance with whatever options suit you:

var selecta = new mooSelecta({
    selector: "select.selecta"
});

new mooSelecta({
    selector: "select.selecta2",
    triggerClass: "selecta2",
    triggerPadding: 24,
    triggerBeforeImage: "/img/select-left.png",
    triggerBeforeImageWidth: 3,
    triggerBeforeImageHeight: 21,
    wrapperClass: "selecta2Wrapper",
    wrapperWidthAdjustment: 0,
    optionClass: "selecta2Option",
    optionClassSelected: "selecta2OptionSelected",
    optionClassOver: "selecta2OptionOver"
});

Class methods

The class itself has plenty of comments throughout so feel free to look at the source code. That being said, there are the following useful methods you can call:

.replaceSelect(el); // applies the current style to a new select element. Also useful if you build options on the fly and change existing selects

.bindListeners(); // a somewhat private method that will enable listen events for any and all subsequent **mooSelectas**

._addOption(option, el, selected); // adding options to the dropdown wrapper.

._toggleOptions(el); // opens or shuts the options list on a select that has been focused

._hideOptions(); // closes all open options.

._clearSelection(); // attempt to avoid text node selection when clicking on an option trigger

Known issues

  • Problems with Opera and .fireEvent("click") and the resulting .stop(), causing keyboard navigation issues when pressing enter.

Known limitations

Obviously, the select elements are very complex and OS-driven components that incorporate a number of usability features, albeit -- implemented very differently across browsers. You cannot possibly hope to write a single tool that can mimic all known behaviours across the different operating systems either. It's a simple usability decision on what works and what does not, feel free to tweak it to your liking or to the liking of your users.

Something went wrong with that request. Please try again.