jQuery Plugin For Custom Select Menus

A simple and clean jQuery plugin that helps you easily create custom select menus for your website or web application.

You might also like:

• Form Select Element Replacement Plugin  - Mighty Form Styler
• Default Checkbox Replacement Plugin - jQuery prettyCheckable
• Standard Select Form Replacement Plugin - Selectik
• Select Boxes Replacement Plugin - Select2
• Simple jQuery Plugin To Beautify Your Select Boxes - selectskin
• jQuery Multiple Select Element Replacement Plugin - selectlist
• Beautiful Select Element Replacement Solution with jQuery and CSS3
• Simple Stylizable Select Input Plugin with jQuery - Brute Select
• jQuery Plugin For Customizable Select Box - selectify

How it works :

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>
</div>
<input type="hidden" name="color-menu" value="" />

How to use it :

1. Include the lastest jQuery Library and custom-select-menu-jquery.js on your web page

<link href="https://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css">
<script src="custom-select-menu-min.jquery.js"></script> 

2. HTML Markup Structure

<form id="my-form">
<select name="color-menu" id="my-color-menu">
<option>Choose one...</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="indigo">Indigo</option>
<option value="violet">Violet</option>
</select>
</form>

3. The CSS

.custom-select-menu {
  display: inline-block;
  margin-bottom: 8px;
  outline: none;
  position: relative;
}

.custom-select-menu label {
  border: 2px solid #888;
  border-radius: 4px;
  color: #888;
  display: inline-block;
  font-weight: bold;
  padding: 10px 32px 10px 10px;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  user-select: none;
}

.custom-select-menu label.selection-made {
  color: #000;
}

.custom-select-menu label:after {
  border-top: 6px solid #888;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  position: absolute;
  right: 10px;
  top: 16px;
}

.custom-select-menu label.opened {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-select-menu:focus label {
  border-color: #000;
}

.custom-select-menu ul {
  background: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  list-style: none;
  left: 10px;
  margin: 0 -10px;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 40px;
  z-index: 2;
}

.custom-select-menu  li {
  background-color: #fff;
  cursor: pointer;
  padding: 7px 10px;
}

.custom-select-menu li:hover,
.custom-select-menu .selected {
  background-color: rgba(0,0,0,.05);
}

.custom-select-menu .results {
  overflow: scroll;
  max-height: 150px;
}

.custom-select-menu label {
  width: 200px;
}
.custom-select-menu ul {
  width: 242px;
}

4. Call the plugin

<script>
      $(document).ready(function() {
        $('select').customSelectMenu();
      });
</script>

Change Log:

v1.0.3 (2013-11-03)

• Updated plugin version from 1.0.2 to 1.0.3 after merging bug fix for issue

v1.0.2 (2013-04-06)

• Better event delegation and cleaned up/simplified code a bit

v1.0.1 (2013-03-08)

• Fixed: Pressing return/enter key on a closed menu should not toggle the label class

---

This awesome jQuery plugin is developed by derekpcollins. For more Advanced Usages, please check the demo page or visit the official website.