uberselect v2.1.2
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.