superselect provides a CSS customizable select
box, while introducing minimum HTML & keeping maximum widget usability -- native support for arrow keys, search-as-you-type, scroll wheel, proper z-index, etc.
superselect uses the actual select
widget for displaying options, after activating it's size
attribute. That is it.
Regular "select box styling" scripts uses unnecessary markups like ul
& li
to render select options. This approach means having to add reams of javascript to create new html elements, copy option values into those elements, manage arrow keys, pass chosen option values back into hidden input fields.
Was iframe
shims added to manage z-index issues? Is there support for search-as-you-type? What if ajax scripts changes the select options
?
Given a select box,
<!-- your select tag -->
<select name="my-select">
<!-- your option tags -->
</select>
Include jQuery, superselect script & apply it to your select
element
<script src="jquery.min.js"></script>
<script src="jquery.superselect.min.js"></script>
<script>
jQuery('select').superselect();
</script>
Your select
will become
<div class="superselect-anchor">
<div class="superselect-wrap superselect-?">
<div class="superselect-current">
<span class="superselect-current-label"><!-- current selection --></span>
<div class="superselect-right-image"></div>
</div>
</div>
<!-- your select tag -->
<select name="my-select" style="z-index: 0; display: none;" class="superselect-select" size="?">
<!-- your option tags -->
</select>
</div>
Adds a custom class to each select element allowing individual styling
individualStyling: true
Set the number of options to show when clicked
size: 5
Make superselect mimic the default browser behaviour and set the width of each select to that of it's children
reuseWidth: true
Tested with
- IE 7-9
- Firefox
- Safari
- Chrome
- Android 2.3.3 (stock browser)
- iOS 5-6 (both iPhone & iPad)
Original code written by Chew Choon Keat, http://github.com/choonkeat/yaselect in 2011 under the MIT license
Rewritten on that basis in 2012 & 2013 by Jonathan Wilsson & Oskar Risberg for Supernormal and re-released under dual license Beerware & MIT.