Cross-browser Select Element Enhancement Plugin with jQuery - ui-select

ui-select is a jQuery plugin that enhance and beautify the default select element to make it has the same appearance in different browsers. Also provides several methods to control the select element easily and quickly.

How to use it:

1. Include jQuery library and the jQuery ui-select anywhere you prefer.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/ui-select.js"></script>

2. Initialize the plugin by calling the ui_select() function on existing select element.

$('.ui-select').ui_select();

3. Style the select element as per you need. Modify and override the sample CSS styles displayed below to create your own styles.

.ui-select-wrap {
  display: inline-block;
  border: 1px solid #aaa;
  position: relative;
  height: 30px;
  padding-right: 15px;
  border-radius: 3px;
  background-color: #f2f2f2;
  cursor: pointer;
  font: 100 16px/30px;
  -webkit-user-select: none;
  user-select: none;
  z-index: 8;
  vertical-align: top;
}

.ui-select-wrap.focus { z-index: 9; }

select.ui-select {
  height: 32px;
  vertical-align: top;
  padding: 0 8px 0 4px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background-color: #f2f2f2;
  font: 100 16px/30px;
}

.ui-select-wrap>select {
  display: none;
  height: 32px;
  vertical-align: top;
  padding: 0 8px;
  border: 1px solid #aaa;
}

.ui-select-input {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 15px;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.ui-select-arrow {
  display: block;
  position: absolute;
  right: 3px;
  top: 40%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-width: 6px 5px 0 5px;
  border-top-color: #999;
}

.ui-select-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
  left: -1px;
  top: 30px;
  background-color: #fff;
  border: 1px solid #AAA;
  width: 100%;
  overflow: auto;
  max-height: 200px;
  border-radius: 0 3px 3px 3px;
}

.ui-select-wrap.up .ui-select-list {
  top: auto;
  bottom: 30px;
}

.ui-select-wrap.focus .ui-select-list { display: block; }

.ui-select-list>li {
  display: block;
  line-height: 28px;
  padding: 0 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-select-list>li:hover { background-color: #ddd; }

.ui-select-list>li.selected {
  background-color: #0080ff;
  color: #fff;
}

.ui-select-list>li.disabled {
  background-color: #f2f2f2;
  color: #999;
  cursor: not-allowed;
}

.ui-select-list>li.disabled.selected {
  background-color: #59ADFF;
  color: #f2f2f2;
  cursor: not-allowed;
}

.ui-select-wrap.disabled {
  color: #999;
  border-color: #ccc;
  cursor: not-allowed;
}

.ui-select-wrap.disabled .ui-select-arrow { border-top-color: #ccc; }

4. API.

// enable select
$('select').enable();

// disable select
$('select').disable();

// select option 3
$('select').val('3');

// toggle the plugin
$('select').toggle();

// hide the select
$('select').visible();

// show the select
$('select').visible(true);

Change log:

2016-01-04

• fixed

2015-12-17

• style update

---

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