Yet another CSS-customizable select plugin for jQuery. But this one is more native than the rest.
Failed to load latest commit information.
demo Fixes IE7 bug where toggling of yaselect-open/close classes could go … Jul 18, 2011 Update README to include automatically resize tip Jun 3, 2011
jquery.yaselect.min.js Fix previous commit. Too bad "(37 <= e.which <= 40)" does not work Jul 26, 2011

Yet-Another [jQuery] Select


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

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

<script src="jquery.min.js"></script>
<script src="jquery.yaselect.min.js"></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>
  <!-- your select tag -->
  <select style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; " class="yaselect-select" size="?">
    <!-- your option tags -->


Bonus tip

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

  $(this).width($('select', this).width()+20); // 20px padding for arrow, adjust to match CSS

This tip is provided by @spaceninja in #6



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