A jQuery Plugin that allows you to create custom select menus. To see the custom menu in action, check out the demo.

First, download and include custom-select-menu.jquery.js (or the minified/gzipped version) in your HTML document:

<script src="/path/to/custom-select-menu.jquery.js"></script>

Next, call the customSelectMenu() method on any select element in order to start customzing it. Note that you can pass the customSelectMenu() method an id, a class, or even just the select element itself.

$('select').customSelectMenu();

This will take a regular select menu such as this:

<select name="color-menu" id="my-color-menu">
  <option>Choose a color...</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

And turn it into this:

<div class="custom-select-menu" tabindex="0" id="my-color-menu">
  <label>Choose a color...</label>
  <ul style="display: none;">
    <li data-option-value="" class="selected">Choose a color...</li>
    <li data-option-value="red">Red</li>
    <li data-option-value="green">Green</li>
    <li data-option-value="blue">Blue</li>
  </ul>
  <input type="hidden" name="color-menu" value="" />
</div>

The following are user-configurable options:

You can set these options by passing them to the customSelectMenu() method:

$('select').customSelectMenu({
  menuClass : 'my-menu',
  openedClass : 'shown',
  selectedClass : 'active',
  selectionMadeClass : 'has-been-selected'
});

There are no styles implied with this plugin because I didn't want to make any assumption about how someone would want the menu to look. For tips on styling the menu, take a look at the CSS on the demo page.

Please note that this plugin requires jQuery version 1.8 or later.

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.