Simple jQuery Custom Select Boxes Demo

Basic Usage:

Put the custom selectbox stylesheet, your JQuery library and my simple custom selectbox plugin above the </head> code:

...
...

<link href="jquery.select.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery.select.min.js"></script>
<script>
$(document).ready(function() {
    $('select').customSelectBox().change(function() {
        // Stuff that will be triggered based on the selectbox change event
    });
});
</script>
</head>

This plugin will wrap the original selectbox element and add some HTML tags as a fake selectbox element:

<!-- Generated HTML Markup -->

<div class="select">
    <select style="visibility:hidden;">
        <option value="value-1" selected>Lorem Ipsum 1</option>
        <option value="value-2">Lorem Ipsum 2</option>
        <option value="value-3">Lorem Ipsum 3</option>
        <option value="value-4" disabled>Lorem Ipsum 4</option>
    </select>
    <span class="current">Lorem Ipsum 1</span>
    <ul style="display:none;">
        <li class="selected o-0" data-value="value-1">Lorem Ipsum 1</li>
        <li class=" o-1" data-value="value-2">Lorem Ipsum 2</li>
        <li class=" o-2" data-value="value-3">Lorem Ipsum 3</li>
        <li class="disabled o-3" data-value="value-4">Lorem Ipsum 4</li>
    </ul>
</div>

Where:

• select ⇒ selectboxClass
• current ⇒ buttonClass
• selected ⇒ selectedClass
• disabled ⇒ disabledClass
• focused ⇒ focusedClass

Custom Classes

You also can modify the custom selectbox classes by configuring this plugin options:

$('select').customSelectBox({
    selectboxClass: 'my-selectbox',
    buttonClass: 'my-selectbox-button',
    selectedClass: 'my-selectbox-selected-state',
    disabledClass: 'my-selectbox-disabled-class',
    focusedClass: 'my-selectbox-focus-state'
}).change(function() {});

Then, this is your basic custom selectbox CSS:

/* selectbox outer */
.my-selectbox {
  display:inline-block;
  position:relative;
  line-height:28px;
  height:28px;
  border:1px solid;
  background-color:white;
}

/* select element inside the custom selectbox */
.my-selectbox select {
  padding:0 0;
  margin:0 0;
  height:0;
  visibility:hidden;
}

.my-selectbox,
.my-selectbox .my-selectbox-button {padding:0 10px}

/* selectbox button (current value holder) */
.my-selectbox .my-selectbox-button {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  cursor:pointer;
}

/* focused selectbox button */
.my-selectbox .my-selectbox-button.my-selectbox-focus-state {
  background-color:gray;
}

/* dropdown menu (fake option list) */
.my-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  right:0;
  left:0;
  background-color:white;
  border:1px solid;
  z-index:99;
}

/* menu item (fake option item) */
.my-selectbox li {
  list-style:none;
  margin:0 0;
  padding:0 10px;
  cursor:pointer;
}

/* hover state */
.my-selectbox li:hover {
  background-color:yellow;
}

/* selected option */
.my-selectbox li.my-selectbox-selected-state {
  color:red;
}

/* disabled option */
.my-selectbox li.my-selectbox-disabled-class {
  color:gray;
  cursor:text;
}