johnathan-sewell · May 25, 2011 21:37
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="en">
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<style>
 		.styled-dropdown {
 			border: 1px solid #333333;
 			color: #000000;
 			cursor: pointer;
 			float: left;
 			height: 20px;
 			line-height: 20px;
 			position: relative;
 			width: 200px;
 		}
 			.styled-dropdown p {
 				height: 20px;
 				line-height: 20px;
 				padding: 0 0 0 3px;
 				margin:0;
 			}
 			ul.styled-dropdown-list {
 				border: 1px solid #333333;
 				color: #000000;
 				cursor: pointer;
 				float: left;
 				left: -1px;
 				line-height: 20px;
 				list-style: none outside none;
 				margin: 0;
 				padding: 0;
 				position: absolute;
 				width: 200px;
 				z-index: 1;
 			}
 				ul.styled-dropdown-list li {
 					background: #fff;
 					padding: 0 0 0 3px;
 				}
 				ul.styled-dropdown-list li.odd {
 					background: #E8E7E6;
 				}
 				ul.styled-dropdown-list li:hover{
 					background: #666;
 					color: #fff;
 				}
 	</style>
 </head>
 <body>
 	<div id="container">
 		<select>
 			<option value="0">Sunday</option>
 			<option value="1">Monday</option>
 			<option value="2">Tuesday</option>
 			<option value="3">Wednesday</option>
 			<option value="4">Thursday</option>
 			<option value="5">Friday</option>
 			<option value="6">Saturday</option>
 		</select>
 	</div>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>

 	<script>

 		$(function () {
 			$("select").styledUpDropDownList();

 			$("select").change(function () {
 				console.log("You selected option " + $(this).val());
 			});

 		});
 		
 		//Replaced a select element with a JavaScript version that can be more easily styled
 		(function ($) {
 			$.fn.styledUpDropDownList = function () {
 				var originalElement = this;

 				var newElement = $("<div class='styled-dropdown'></div>");
 				var paragraphElement = $("<p></p>");
 				var listElement = $("<ul class='styled-dropdown-list'></ul>");

 				//set paragraph text to match first option text
 				paragraphElement.text(originalElement.children("option:selected").text());
 				newElement.append(paragraphElement);
 				newElement.css("width", originalElement.css("width"));

 				//hide the list of options when user clicks outside
 				$("html").click(function(){
 					listElement.hide();
 				});
 				paragraphElement.click(function(event){
 					listElement.toggle();	//show/hide the list of options
 					event.stopPropagation();	//stop propagation to <html> click event
 				});

 				//build a list of options from the original select list options
 				originalElement.children().each(function (index) {
 					if (index === 0) return;	//skip first item (assumes it is a 'please select' type placeholder)
 					var originalItem = $(this);

 					var newItem = $("<li>" + originalItem.text() + "</li>");
 					newItem.attr("id", originalItem.val());
 					newItem.click(function(){
 						//set the selected option on the original select element
 						var selectedValue = $(this).attr("id");
 						var originalOptionToSelect = originalElement.find("option[value='"+selectedValue+"']");	//option to select
 						originalOptionToSelect.attr("selected", "selected");
 						originalOptionToSelect.change();	//fire the change event
 						paragraphElement.text($(this).text());
 						listElement.hide();
 					});
 					listElement.append(newItem);
 				});

 				//add class for alternate row styling
 				listElement.children("li:odd").addClass("odd");

 				listElement.hide(); //hide options at start
 				originalElement.hide();	//hide the original select element
 				newElement.append(listElement);
 				newElement.insertBefore(originalElement);

 				return this;
 			};
 		})(jQuery);
 	</script>
 </body>
 </html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<style>
	.styled-dropdown {
	border: 1px solid #333333;
	color: #000000;
	cursor: pointer;
	float: left;
	height: 20px;
	line-height: 20px;
	position: relative;
	width: 200px;
	}
	.styled-dropdown p {
	height: 20px;
	line-height: 20px;
	padding: 0 0 0 3px;
	margin:0;
	}
	ul.styled-dropdown-list {
	border: 1px solid #333333;
	color: #000000;
	cursor: pointer;
	float: left;
	left: -1px;
	line-height: 20px;
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 200px;
	z-index: 1;
	}
	ul.styled-dropdown-list li {
	background: #fff;
	padding: 0 0 0 3px;
	}
	ul.styled-dropdown-list li.odd {
	background: #E8E7E6;
	}
	ul.styled-dropdown-list li:hover{
	background: #666;
	color: #fff;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<select>
	<option value="0">Sunday</option>
	<option value="1">Monday</option>
	<option value="2">Tuesday</option>
	<option value="3">Wednesday</option>
	<option value="4">Thursday</option>
	<option value="5">Friday</option>
	<option value="6">Saturday</option>
	</select>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>

	<script>

	$(function () {
	$("select").styledUpDropDownList();

	$("select").change(function () {
	console.log("You selected option " + $(this).val());
	});

	});

	//Replaced a select element with a JavaScript version that can be more easily styled
	(function ($) {
	$.fn.styledUpDropDownList = function () {
	var originalElement = this;

	var newElement = $("<div class='styled-dropdown'></div>");
	var paragraphElement = $("<p></p>");
	var listElement = $("<ul class='styled-dropdown-list'></ul>");

	//set paragraph text to match first option text
	paragraphElement.text(originalElement.children("option:selected").text());
	newElement.append(paragraphElement);
	newElement.css("width", originalElement.css("width"));

	//hide the list of options when user clicks outside
	$("html").click(function(){
	listElement.hide();
	});
	paragraphElement.click(function(event){
	listElement.toggle(); //show/hide the list of options
	event.stopPropagation(); //stop propagation to <html> click event
	});

	//build a list of options from the original select list options
	originalElement.children().each(function (index) {
	if (index === 0) return; //skip first item (assumes it is a 'please select' type placeholder)
	var originalItem = $(this);

	var newItem = $("<li>" + originalItem.text() + "</li>");
	newItem.attr("id", originalItem.val());
	newItem.click(function(){
	//set the selected option on the original select element
	var selectedValue = $(this).attr("id");
	var originalOptionToSelect = originalElement.find("option[value='"+selectedValue+"']"); //option to select
	originalOptionToSelect.attr("selected", "selected");
	originalOptionToSelect.change(); //fire the change event
	paragraphElement.text($(this).text());
	listElement.hide();
	});
	listElement.append(newItem);
	});

	//add class for alternate row styling
	listElement.children("li:odd").addClass("odd");

	listElement.hide(); //hide options at start
	originalElement.hide(); //hide the original select element
	newElement.append(listElement);
	newElement.insertBefore(originalElement);

	return this;
	};
	})(jQuery);
	</script>
	</body>
	</html>