Simple jQuery Based Replacement For Select Boxes - udselect

udselect is a simple light-weight jQuery plugin which adds custom styles to default select box with CSS and Font Awesome icons.

How to use it:

1. Load jQuery library and the jQuery udselect plugin in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/jquery.udselect.js"></script>

2. Include the udselect.css for basic select styles. You can also modify or override the styles to your needs.

.udselect {
  background: #ffffff;
  border: 1px solid #ACC0CA;
  border-radius: 4px;
  color: #000000;
  padding-right: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.udselect span.udselect-extension {
  color: #ffffff;
  background: #ACC0CA;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding-left: 7px;
  padding-right: 14px;
}

.udselect span.udselect-extension .fa { margin-left: -15px; }

3. Load Font Awesome 4 for dropdown icons.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

4. Call the plugin on the existing select boxes and done.

$('select').udselect(});

5. More customization options.

$('select').udselect({

/**
* Width of the box, default is 100% for responsiveness.
*/
width: '100%',

/**
* Static height in pixles. Ex. 32px.
*/
height: '38px',

/**
* Default <select> CSS.
*/
selectCss: {
  'z-index':'10',
  'position':'relative',
  'opacity':0,
  '-khtml-appearance':'none',
  '-webkit-appearance': 'menulist-button'
},

/**
* Default <span> CSS.
*/
spanCss: {
  'z-index':'1',
  'position':'absolute',
  'bottom':'0',
  'left':'0',
  'text-indent':'10px',
  'cursor':'default',
  'overflow': 'hidden',
  'word-break': 'break-all'
},

/**
* Callback function.
*/
spanElementCallback: function (title) {
  return '<span class="udselect"><span class="udselect-text">' + title + '</span><span class="udselect-extension"><span class="fa fa-chevron-down"></span></span></span>';
}

});

---

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