johnathan-sewell/index.html

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