jQuery uberSelect

Customize only your select inputs and keep the native user interface for options.

You don't need extra stuff to add events or add/remove options in your select elements, simply you do it in the standar way.

Tested on: IE9+, FireFox, Chrome, Safari and Chrome for Android. I think it should work on other not too old browsers.

How to use

1.- Include jQuery and uberSelect scripts in your page

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="uberselect.js"></script>

Or do it with npm

npm install uberselect --save

It's browserify compatible!

2.- To activate uberSelect, just call the method:

$('#myselect').uberSelect();

Or you may define the class name to use:

$('#myselect').uberSelect({className: 'custom-uberselect'});

Also, the plugin automatically starts on all select elements with data-uberselect attribute.

<select name="country" data-uberselect="<class-name>">...</select>

Where <class-name> is the name of the CSS class you want to use.

You can also add a placeholder attribute and uberSelect will put a placeholder option automagically for you.

<select name="country" data-uberselect="<class-name>" placeholder="Select a country">...</select>

Note: Options with value "" (empty string) will be trated as placeholder, so make sure this behavior don't make conflicts with your current "options logic".

Pro Tip: You can use more than one class name, for example uberselect uberselect-contact-form, in this way you can style your general uberselect class and for the contact form make a little tweaks on uberselect-contact-form.

3.- Styling!

Style .uberselect
This element wraps your original <select> and a <span> that shows the current selected option. Style this element with background-image, border, box-shadow etc.
And you can style .uberselect.focus for the focus state (when the original <select> element is focused, and .uberselect.placeholder when the placeholder option is selected.

Pro Tip: Use :after or :before (or both) pseudo classes to add a nice dropdown arrow

Style .uberselect > span
This element is to display the text of the selected option, usually you add here text styles like font-size, font-weight, text-overflow etc.

Pro Tip: Use overflow: hidden; white-space: nowrap; text-overflow: ellipsis; to avoid the text overflow when an option with a large text is selected.

Example: http://codepen.io/sahibalejandro/pen/GJJgEp

That's All.

Feel free to use issues system to report bugs or something.