MooTools class for replacing select box in browsers with your own styled ones
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Simply, MooChoose is a replacement for the standard select input. Since every browser and OS render them differently it can make your user interface look different to each user, this is no good in some cases where you really need to brand everything.

How to use

Really simple actually. You may use the default selectClass (moochoose) or you may decide to define that in your init.

Include in document HEAD

<script language="javascript" type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
<script language="javascript" type="text/javascript" src="mootools-"></script>
<script language="javascript" type="text/javascript" src="moochoose.js"></script>
<link rel="stylesheet" type="text/css" href="css/moochoose.css" /> 

Call MooChoose with domready event

var myMooChoose;
window.addEvent('domready', function(){
    myMooChoose = new mooChoose({ OPTIONS });

Documentation, Download & Examples

Rainbolt Studios

Known Issues

Opera: For some reason the options when moused over don't get the hover state as well as add and remove class on the arrow key events. If you close and reopen the dropdown you'll see the class has been added.