jQuery.styledSelect

Fore more information visit the homepage:

http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview

• Example 1 - Basics
• Example 2 - More styles
• Example 3 - Change classes
• Example 4 - Pretty
• Example 5 - Updating values

Example 1 - Basics

The simplest form with very basic CSS styling.

JavaScript
$(document).ready(function() {
	$('form#firstExample select').styledSelect();
});	

CSS
.styledSelect {
	width: 150px;
	font-size: 14px;
	height: 19px;
	margin: 0;
	padding: 0;
	position: relative;
}
.styledSelect ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: 1px solid #333;
}
.styledSelect ul li {
	font-family: sans-serif;
	margin: 0;
	padding: 3px;
	display: block;
	background-color: #EEE;
}

Example 2 - More styles

Adds background colors for all the various states that a list element can have.

JavaScript
$(document).ready(function() {
	$('form#secondExample select').styledSelect();
});	

CSS (in addition to the CSS code from example 1)
.styledSelect ul li.closed { background-color: #FFF; }
.styledSelect ul li.closed:hover { background-color: #FFC; }
.styledSelect.open ul li { background-color: #EEE; }
.styledSelect.open ul li.first { background-color: #FCC; }
.styledSelect.open ul li.last { background-color: #CCF; }
.styledSelect.open ul li.selected { background-color: #CFC; }
.styledSelect.open ul li:hover { background-color: #FF0; }

Example 3 - Change classes

Hwo to change CSS classes by overwriting default settings. This will not usually be necessary but might help if the existing CSS already uses the usual classes.

JavaScript
$(document).ready(function() {
	$('form#thirdExample select').styledSelect({
		selectClass: 'mySelect',
		openSelectClass: 'active',
		optionClass: 'item',
		selectedOptionClass: 'current',
		closedOptionClass: 'inactive',
		firstOptionClass: 'start',
		lastOptionClass: 'end'
	});
});	

CSS
.mySelect {
	width: 150px;
	font-size: 14px;
	height: 19px;
	margin: 0;
	padding: 0;
	position: relative;
}
.mySelect ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: 1px solid #333;
}
.mySelect ul li {
	font-family: sans-serif;
	margin: 0;
	padding: 3px;
	display: block;
	background-color: #EEE;
}
.mySelect ul li.inactive { background-color: #FFF; }
.mySelect ul li.inactive:hover { background-color: #FFC; }
.mySelect.active ul li { background-color: #EEE; }
.mySelect.active ul li.start { background-color: #FCC; }
.mySelect.active ul li.end { background-color: #CCF; }
.mySelect.active ul li.current { background-color: #CFC; }
.mySelect.active ul li:hover { background-color: #FF0; }

Example 4 - Pretty

Now we get going.

JavaScript
$(document).ready(function() {
	$('form#fourthExample select').styledSelect();
});	

CSS
.styledSelect {
	width: 202px;
	font-size: 14px;
	height: 22px;
	margin: 0;
	padding: 0;
	position: relative;
	background: #FFF url(example4.png) top left no-repeat;
}
.styledSelect ul {
	list-style: none;
	padding: 1px;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.styledSelect.open ul {
	border: 1px solid #069;
	padding: 0px;
}
.styledSelect ul li {
	font-family: sans-serif;
	margin: 0;
	padding: 2px 25px 3px 10px;
	display: block;
}
.styledSelect.open ul li { background-color: #FFF; }
.styledSelect.open ul li.selected { background-color: #A4D9F9; }
.styledSelect.open ul li:hover { background-color: #EEE; }

Example 5 - Updating values

To show how the actual select element interacts with our virtual select box we make it show up again after it was hidden by the `styledSelect()` method. Change the select's value and it is immediately updated in the styledSelect box. And the other way of course. Add new options to the select box via Javascript and they show up in the styledSelect box the next time it opens.

Click to add an option

JavaScript
$(document).ready(function() {
	$('form#fifthExample select').styledSelect();
	$('form#fifthExample select').show();
	fifthCounter = 1;
	$('#fifthAdd').click(function(){
		$('form#fifthExample select').append('Dynamically added option '+fifthCounter+'');
		fifthCounter++;
		return false;
	});
});	

CSS: 
Identical to example 2

http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview