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
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.