🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Select Select-Box

Documentation

udselect

JQuery plugin to style select boxes. Keeping in mind, universal design.

Select boxes are hard to style - and it must be done correctly to maintain Universal design principles and UX. This plugin creates an overlay that can be styled just as you want with no limitation.

Example style

Example

See example in the example folder.

Wrap a normal select around a div tag.

<select class="styled">     <option value="1">Test</option> </select>

Run the plugin on a selector.

$('select.styled').udselect({ /* options */ });

Style it! This is example of styling:

.udselect {     background: #ffffff;     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; }

Options

Options are passed to the plugin constructor in a hash. Each key is described below.

width

Set a width, default is 100%, can be a fixed width such as 100px.

height

Set a height, default is 38px.

spanElementCallback

A callback function that should return the span that sits below the invisible select tag.

Default includes some extra spans to allow for an arrow on the right side, this can be configured with spanElementCallback:

        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>';         }
  • It is important that you include .udselect-text, this is where the title is put when a user chosen another option.

You May Also Like