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

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?

yaselect 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 style="position: absolute; top: ?px; left: ?px; display: none; " class="yaselect-select" size="?">
  <!-- your option tags -->
</select>

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

<script src="jquery.min.js"></script>
<script src="jquery.yaselect.min.js"></script>
<script>
  jQuery('select').yaselect();
</script>

Your select will become

<div class="yaselect-anchor" style="position: relative;">
  <div class="yaselect-wrap yaselect-?" tabindex="0">
    <div class="yaselect-current"><!-- current selection --></div>
  </div>
  <!-- your select tag -->
  <select style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; " class="yaselect-select" size="?">
    <!-- your option tags -->
  </select>
</div>

`

If you prefer your select to automatically resize to longest option element, you can simply do

$('.yaselect-anchor').each(function(){
  $(this).width($('select', this).width()+20); // 20px padding for arrow, adjust to match CSS
});

This tip is provided by @spaceninja in #6

http://github.com/choonkeat/yaselect

Copyright (c) 2011 Chew Choon Keat, released under the MIT license