Replacement for the standard select using Mootools

Sometimes it is necessary to replace the standard HTML select element to its.
Usually this is necessary if the imagination of the designer was played and he drew the "custom" select and insists that it was sold as he wanted to. Well, should — do.

a Little background.

Once I had to select customize. I'm using mootools, so immediately went to look for plugincheck replacement for select a — if somebody has already written? Indeed, found several. He began to understand. I scanned all plug-ins were complete rubbish — they did not behave like a standard select statement. Threw them in the trash and decided to write a plugin that would completely repeated the behavior of the standard selects a.

Now let's see how it behaves standard select:
the

the
• it is possible to bring it into focus
the
• you Can choose without opening the select and using the arrow keys
the
• to close an open select by pressing esc
the
• you Can select to open the select by pressing enter
the
• you Can remove focus from the select a by clicking the tab
the
• If you select e plenty of options that appears scroll
the
• select a has an onchange event (there are others, but these are the most important)
the
• standard select you can dial the first letter will move the focus directly to the element

down to business

I will not allow code that is useless. Better themselves download and look, or look in the demo. But I'll tell you what happened.

What happened

So, got your "custom" select boxes. And that's what he knows:
the

the
• Standard behavior like a native select
the
• Replaces specified a select statement
the
• he has as many as 4 events: onChange, onSelect, onShow, onHide
the
• Support topic
the
• Has a user-friendly CSS
the
• Has a simple DOM model
the
• Easy to use
the
• Has a method rebuild(), which can be rebuilt "custom" select boxes, if there is a change in the native selects e
the
• JS code weighs about 4 kilobytes in a compressed form and uncompressed 7.5 in

Which at the moment have problems

the
1. you Cannot change the scroll bar which appears in the select boxes with a large number of options
the
2. that select boxes can fall down only, and have to drop out and up when down little space
the
3. Missing mode multiple
the
4. Timeout for parrucche that option by hovering your mouse when you scroll stood out immediately (native selects a so)
the
5. does Not change appearance when clicked
the
6. If there is scrolling, it must automatically scroll when you select items.
the
7. If the mouse nasty on the menu item, then remove the mouse, then pressing Enter should get this element

All of these problems I will try to fix in next releases.

Only tested in IE 7, Firefox 3.0.1, Google Chrome (look somebody in Opera and IE6?)

If something is overlooked — reported. And, of course, report bugs, I will fix it.

Download CustomSelect
View demo

Article based on information from habrahabr.ru