Custom Combobox

The Custom Combobox is a JQuery plugin that enables you to customize the select element of webpages. Why use a custom implementation, well one of the reason is that it can be skinned to match the style of your website or web application. Or prehaps the more compelling reason that Internet Explorer 6 has some issues with the with of the drop down part of the select.

Main features

1. Custom drop down arrows for disabled / mouse over and default combobox states
2. Ability to change the border styles of the drop down part as well as the combobox itself
3. Supports translating the following elements in comboboxes:
   1. select element
   2. ul & ol element

Download current version here.

Using the combobox

A prerequisite for using this plugin is the JQuery Javascript file. This must be included on any page that you wish to use the custom combobox.  Below is a sample of how the combobox can be used.

<script src="jquery-1.4.3-min.js" type="text/Javascript"></script>
<script src="custom-select-min.js" type="text/Javascript"></script>
<link href="custom-select.css" rel="stylesheet" type="text/css" />
Example of custom combobox:
<select id="mybox" name="mybox">
  <option selected="selected" value="1">My custom value 1</option>
  <option value="2">My custom value 2</option>
  <option value="3">My custom value 3</option>
  <option value="4">My custom value 4</option>
</select>
<script type="text/Javascript">
  $(document).ready(function() {
    $("#mybox").SelectBox();
  });
</script>

You can customize the combobox even further by setting some of the properties and passing them allong to the constructor call. The following properties are currently supported:

Known issues

In the current version the following issues are already known and should be kept in mind when using it.

• When used in a page with framesets / iframes the combobox is not displayed outside of the frame that contains it.
• The displaying of some of the styles will not work properly on websites rendered using Quirks mode
• Sub lists sometimes don't close properly

History