Overview of the styledSelect jQuery plugin

The styledSelect plugin for jQuery lets you replace <select> form elements with freely stylable markup.

The original select element stays in the page so your form won't change and users without Javascript simply fall back to the original form element.

Unlike other implementations styledSelect directly replaces a select element. As such it does not support arbitrary data for each element, just the value and text of an option tag.

Download the latest version here

The download contains regular and minified versions as well as the examples.

Homepage at plugins.jquery.com

Examples

• Several examples

Usage

Simplest case (usually sufficient):

$('select').styledSelect();

The styledSelect() method can take a single parameter, which should consist of a list containing options that you want to override. These are the available options with their default values:

{	
	selectClass: 'styledSelect',
	openSelectClass: 'open',
	optionClass: 'option',
	selectedOptionClass: 'selected',
	closedOptionClass: 'closed',
	firstOptionClass: 'first',
	lastOptionClass: 'last',
	zIndexApply: false,
	zIndexStart: 250,
	deactiveOnBackgroundClick: true
}

Most options deal with the classes added to the markup. Look at the Markup section below to see where they go. When zIndexApply is set to true, the div, ul and li elements each get their own z-index. li gets the highest, equal to zIndexStart. ul gets one less, div gets two less. This is for the first select element that was matched by the selector on which styledSelect(). The following select element gets lower z-indexes, starting at zIndexStart-3.

The option deactiveOnBackgroundClick was added in version 1.1. When true, clicks into any other element but the currently open select element result in the select closing.

Markup

styledSelect inserts a bit of HTML next to the select element. The full list of select options is created each time the user clicks on the select box. This ensures that the "fake" select is always in sync with the actual select element.

Closed select:

<div class="styledSelect">
	<ul>
		<li rel="value" class="closed">Title</li>
	</ul>
</div>

Open:

<div class="styledSelect open">
	<ul>
		<li rel="value1" class="option first">Title 1</li>
		<li rel="value2" class="option selected">Title 2</li>
		<li rel="value3" class="option">Title 3</li>
		<li rel="value4" class="option last">Title 4</li>
	</ul>
</div>

Usability

Please be aware of the usability issues that arise from using this plugin instead of just displaying the system-styled selects. it is established that users respond better to known elements. They already know how select boxes look on their system, they'll find it easier to use if it doesn't look totally different. Also keyboard control is impossible. You can't tab through a form and focus on a styledSelect box. Once opened, arrow keys can't be used to select a value.

If you absolutely have to have nicely styled select boxes this is for you. Otherwise please think twice.

Plans

• Scrolling content - right now these styled selects really arent't feasible for a larger number of options.
• Support for multiline selects
• More intelligent selector - currently selects must be targeted directly. styledSelect should also automatically target selects inside the current selector
• Customizable HTML
• Close select when targetting other form element
• Close select when leaving its vincinity for a number of seconds

[http://code.google.com/p/lnet/w/list?q=Project-jQuery-styledSelect Wiki | Issues | Downloads ]