Simple jQuery Based Replacement For Select Boxes - udselect

File Size: 28.8 KB
Views Total: 1811
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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="//" rel="stylesheet">

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


5. More customization options.


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

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

* Default <select> CSS.
selectCss: {
  '-webkit-appearance': 'menulist-button'

* Default <span> CSS.
spanCss: {
  '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.