jQuery Super Select Demo


Try interacting with your tab key to focus, your arrow keys to select an option, try the scroll wheel, clicking on the field labels, search-as-you-type (first alphabet-only for windows), etc

modified by jQuery('#select1').superselect();
carries the same CSS styles as the first
is un-styled
jQuery is making all select elements report their value here onchange


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?


superselect uses the actual select widget for displaying options, after activating it's size attribute. That is it.


Given a select box,

	<!-- your select tag -->
	<select name="my-select">
	  <!-- your option tags -->

Include jQuery, superselect script & apply it to your select element

	<script src="jquery.min.js"></script>
	<script src="jquery.superselect.min.js"></script>


Your select will become

	<div class="superselect-wrap superselect-?" tabindex="0">
	  <div class="superselect-current"><!-- current selection --></div>
	<!-- your select tag -->
	<select name="my-select">
	  <!-- your option tags -->


Copyright (c) 2013 Oskar Risberg & Jonathan Wilsson, released under the dual license MIT and Beerware